Section:

Convert image to PDF in JavaScript

Convert TIFF, BMP, PNG, JPG to PDF using WebViewer SDK in the browser without server-side dependencies. (You can also check out our online Image To PDF demo now.)

Using WebViewer

WebViewer supports loading images by default using initialDoc, or loadDocument API. After loading the document, you can get the document and save it as a PDF or download it.

WebViewer constructor

Load the image with the WebViewer constructor and it will load with the Viewer.

JavaScript

1WebViewer({
2  ...,
3  initialDoc: 'https://myserver.com/myfile.png',
4}, document.getElementById('viewer'));

Related Links

Display & view documents using JavaScript
Full sample code shows how to call WebViewer constructor to instantiate and load document. You can load local/remote files of your choice.

Load document

Load the image with the load document method after WebViewer is initalized.

JavaScript (v8.0+)

1WebViewer(...)
2  .then(instance => {
3    instance.UI.loadDocument('https://myserver.com/myfile.png', { filename: 'myfile.png' });
4  });

Related Links

Display & view documents using JavaScript
Full sample code shows how to call WebViewer constructor to instantiate and load document. You can load local/remote files of your choice.

Load TIFF

WebViewer allows loading TIFF, TIF files in the sample below.

JavaScript (v8.0+)

1Webviewer({
2    fullAPI: true,
3}, viewerRef).then((instance) => {
4    const { Core, UI } = instance;
5    const { PDFNet } = Core;
6    
7    await PDFNet.initialize();
8
9    await PDFNet.runWithoutCleanup(async () => { 
10        const doc = await PDFNet.PDFDoc.create();
11        doc.initSecurityHandler();
12        doc.lock();
13
14        const tiffFile = await PDFNet.Filter.createURLFilter("./files/test.tif");
15        await PDFNet.Convert.fromTiff(doc, tiffFile);
16        doc.unlock();
17        UI.loadDocument(doc);
18    });
19});

Without WebViewer UI

This code sample demonstrates how to convert PDF to image without initializing WebViewer UI.

JavaScript (v8.0+)

1<html>
2  <body>
3    <script src="../lib/core/webviewer-core.min.js"></script>
4    <script src="../lib/core/PDFNet.js"></script>
5    <script>
6    (async function() {
7      Core.setWorkerPath('../lib/core');
8      const doc = await Core.createDocument('https://myserver.com/myfile.png', { filename: 'myfile.png' });
9      const data = await doc.getFileData();
10      const arr = new Uint8Array(data);
11      const blob = new Blob([arr], { type: 'application/pdf' });
12    })()
13    </script>
14  </body>
15</html>

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales