Some test text!

Search
Hamburger Icon

Web / Guides / Image to PDF

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.

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

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.

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

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.

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 PDF to image without initializing WebViewer UI.

<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>

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales