Did you find this guide helpful?
Some test text!
Web / Guides / Image to PDF
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.)
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.
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 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.
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);
});
});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