Preloading webviewer assets

[muraleek...@multunus.com]

We are trying to load a pdf in the webviewer from local machine using file selector. 

var config = {
 path: '../ui/resources/vendor/scripts/webviewer/lib',
 type: 'html5',
 documentType: 'pdf',
 enableAnnotations: false,
 streaming: true,
 documentId: 'pdf',
 path: '../ui/resources/vendor/scripts/webviewer/lib/',
 config: '../ui/resources/vendor/scripts/webviewer/lib/templateConfig.js',
 initialDoc: '../ui/resources/docs/place_holder.pdf'
}
  webviewer = new $window.PDFTron.WebViewer(config, viewerElement);

InitialDoc is provided  to allow webviewer to load required assets before actual pdf is loaded.

webviewer.instance.loadLocalFile(file, {}); //file is file object from dropzone

But webviewer takes very long time to load its resources like PDFNetC.js (11.MB), PDFWorker.pexe(4MB), and a file pdfnet.res(2.8MB). 

 link(rel='preload' href='../ui/resources/vendor/scripts/webviewer/lib/templateConfig.js')
 link(rel='preload' href='../ui/resources/vendor/scripts/webviewer/lib/html5/pdf/PDFNetC.js')
 link(rel='preload' href='../ui/resources/vendor/scripts/webviewer/lib/html5/pdf/PDFNetC.js.mem')
 link(rel='preload' href='../ui/resources/vendor/scripts/webviewer/lib/html5/pdf/PDFWorker.pexe')

I tried using link prefetching but it is still fetched at the time of webviewer initilalization.  Is there any way to preload these file at the time of application load itself?

[Matt Parizeau]

Hi,

Just to clarify, if you don't specify an initialDoc then the files like PDFNetC.js aren't actually downloaded until you call loadLocalFile? From my testing it seems that these JavaScript files are downloaded when the WebViewer iframe is created and a dummy initialDoc value isn't required.

Are you wanting the large resources to load before the WebViewer iframe has loaded? Note that when you construct a new PDFTron.WebViewer it creates an iframe which loads the UI resources as well as other resources like PDFNetC.js. You may want to try adding your preload elements to the ReaderControl.html file which is the html that is used inside the iframe.

Matt Parizeau

Software Developer

PDFTron Systems Inc.