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

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

WebViewer

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

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

WebViewer WebViewerInstance.UI.loadDocument

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

Webviewer({
    fullAPI: true,
}, viewerRef).then((instance) => {
    const { Core, UI } = instance;
    const { PDFNet } = Core;
    
    await PDFNet.initialize();

    await PDFNet.runWithoutCleanup(async () => { 
        const doc = await PDFNet.PDFDoc.create();
        doc.initSecurityHandler();
        doc.lock();

        const tiffFile = await PDFNet.Filter.createURLFilter("./files/test.tif");
        await PDFNet.Convert.fromTiff(doc, tiffFile);
        doc.unlock();
        UI.loadDocument(doc);
    });
});

Without WebViewer UI

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

JavaScript

<html>
  <body>
    <script src="../lib/core/webviewer-core.min.js"></script>
    <script src="../lib/core/PDFNet.js"></script>
    <script>
    (async function() {
      Core.setWorkerPath('../lib/core');
      const doc = await Core.createDocument('https://myserver.com/myfile.png', { filename: 'myfile.png' });
      const data = await doc.getFileData();
      const arr = new Uint8Array(data);
      const blob = new Blob([arr], { type: 'application/pdf' });
    })()
    </script>
  </body>
</html>