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.

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>

Get the answers you need: Chat with us