Page rendering is very slow

[Vishnupriya112]

I have updated the version 2012 to 2017 even though its very slow.

[Anandks1993]

Do you have any sample project to make use of pdf-annotate.js, The example they gave here works, but I couldn't able to try it out as a new project. Thanks in advance.

[Vishnupriya112]

You have to change your documentId

[Anandks1993]

I changed documentId but I could not able to start a completely new project with pdf-annotate.js. Like how we should make use of it, as a npm package or as an external js file.

[Vishnupriya112]

What error you are getting?

[Anandks1993]

// import __pdfjs from 'pdfjs-dist/build/pdf';
// import PDFJSAnnotate from 'pdf-annotate';
var PDFJSAnnotate = require('pdf-annotate');

// console.log(PDFJSAnnotate.default.UI, 'pdf annotate js');
var UI = PDFJSAnnotate.default.UI;
const VIEWER = document.getElementById('viewer');
const RENDER_OPTIONS = {
    documentId: 'Deep Learning_ A Practitioner’s Approach.pdf',
    pdfDocument: null,
    scale: 1,
    rotate: 0
  };
  
  PDFJS.workerSrc = 'pdf.worker.js';
  let MyStoreAdapter = PDFJSAnnotate.StoreAdapter;
  PDFJSAnnotate.setStoreAdapter(MyStoreAdapter);
//   PDFJSAnnotate.setStoreAdapter(new PDFJSAnnotate.LocalStoreAdapter());
  
PDFJSAnnotate.default.getAnnotations();
PDFJS.getDocument(RENDER_OPTIONS.documentId).then((pdf) => {
    RENDER_OPTIONS.pdfDocument = pdf;

    let viewer = document.getElementById('viewer');
    viewer.innerHTML = '';
    NUM_PAGES = pdf.pdfInfo.numPages;
    for (let i=0; i<NUM_PAGES; i++) {
      let page = UI.createPage(i+1);
      viewer.appendChild(page);
    }

    PDFJSAnnotate.default.getAnnotations();

    UI.renderPage(1, RENDER_OPTIONS).then(([pdfPage, annotations]) => {
      let viewport = pdfPage.getViewport(RENDER_OPTIONS.scale, RENDER_OPTIONS.rotate);
      PAGE_HEIGHT = viewport.height;
    });
  });

This is what my main.js file looks like. This file will be bundled with webpack. I am using babel-loader. Even then it doesn't allows me to use import. And now the error says Uncaught TypeError: PDFJSAnnotate.setStoreAdapter is not a function.

[Anandks1993]

Any idea or some example of how we can use pdf-annotate js?

[Vishnupriya112]

Try to clone the package and use.

[Anandks1993]

Yeah, I tried that and the example worked but with that, I don't know how to use it for production. So I moved on to create a new project and make use of pdf-annotate.js.

[Vishnupriya112]

var RENDER_OPTIONS = {
    documentId: documentId,
    pdfDocument: null,
		//scale: parseFloat(localStorage.getItem(documentId + '/scale'), 10) || 1.33,
		scale: strUser,
		rotate: parseInt(localStorage.getItem(documentId + '/rotate'), 10) || 0
					
};
_2.default.setStoreAdapter(new _2.default.LocalStoreAdapter());
PDFJS.workerSrc = '/shared/pdf.worker.js';

give your path correctly for PDFJS.workerSrc and am getting documentId using js, In documentId you have to mention the exact path

[Anandks1993]

It worked now, Thank you. I changed PDFJSAnnotate.setStoreAdapter(new PDFJSAnnotate.LocalStoreAdapter()) to this PDFJSAnnotate.default.setStoreAdapter(new PDFJSAnnotate.default.LocalStoreAdapter()). But now again some other error came up, Uncaught (in promise) TypeError: PDFJS.DefaultTextLayerFactory is not a constructor this error comes from page.js:86
The text present in line no 86 is var textLayerFactory = new PDFJS.DefaultTextLayerFactory();

[Vishnupriya112]

check whether you have add pdf_viewer.js correctly

[Anandks1993]

Yeah, Thank you, I forgot to import js file in HTML. But now only one pdf page renders remaining pages are not getting rendered. And the annotation actions are not happening. Do I need to include any file for that (like pdf-annotate.js)? I included one index.js file from example the annotations are working fine and all pages are getting rendered. But my doubt is, is that correct file to include? Thanks in advance.

[Vishnupriya112]

In you r code you are rendering only one page.. Try to render all page

	    PDFJS.getDocument(RENDER_OPTIONS.documentId).then(function (pdf) {
	        RENDER_OPTIONS.pdfDocument = pdf;
	        var viewer = document.getElementById('viewer');
	        viewer.innerHTML = '';
					NUM_PAGES = pdf.pdfInfo.numPages;
					
					for (var i = 0; i < NUM_PAGES; i++) 
					{
							var page = UI.createPage(i + 1);
							
	            viewer.appendChild(page);
	     
	        UI.renderPage(i+1, RENDER_OPTIONS).then(function (_ref) {

	            var _ref2 = _slicedToArray(_ref, 2),
	                pdfPage = _ref2[0],
	                annotations = _ref2[1];
                  
							var viewport = pdfPage.getViewport(RENDER_OPTIONS.scale, RENDER_OPTIONS.rotate);
	            PAGE_HEIGHT = viewport.height;
							localStorage.setItem(RENDER_OPTIONS.documentId + '/HEIGHT', pdfPage.pageInfo.view[3]);
					});
					
				}
	        renderedPages.push(1);
	    });

Try this one for PDFJS.getDocument function

Yes you have to include annotate.js file too.. Include all the files which you need

[Anandks1993]

renderedPages and slicedToArray are throwing as reference error. May I know what that is? Thank you, Actually all the pages rendered now. But I have doubt regarding which file to import in index.html to make annotations happen. I used index.js from example of this package. But I can see another file named pdf-annotate.js. Which one do I need to make use of?

[Vishnupriya112]

I have included :

<script src="/shared/pdf.js"></script> <script src="/shared/pdf_viewer.js"></script> <script src="/shared/annotate.js"></script>

Based upon this include your files.. You should include annotate.js ..

You can hide renderedPages.push(1); in getDocument function

[Anandks1993]

Can I get link for annotate.js, I do have pdf-annotate.js file but that didn't work. And I have hidden renderedPages.push(1) but slicedToArray is still there. May I know what is that. Thanks

[Anandks1993]

Is this the file I need to include https://github.com/instructure/pdf-annotate.js/blob/master/dist/pdf-annotate.js ? or this https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js ?
With this https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js file I could able to annotate.

[Vishnupriya112]

Include both the files which you said first .. Just mention the path

[Anandks1993]

Okay, Thank you very much for spending your valuable time. It worked fine.

[Vishnupriya112]

Glad to hear. If you find any solution to rendering the page fast means solve my issue too

[Anandks1993]

Yeah sure. I will let you know if I find some solution for that.

[syedali78666]

/var/www/html/pdf/pdf/pdf-annotate.js/node_modules/create-stylesheet/index.js:2
var style = document.createElement('style');
^

ReferenceError: document is not defined

I am getting this error when I use var PDFJSAnnotate = require('pdf-annotate');