set canvas height same as viewport height Var viewport = page.getViewport(scale_required) get viewport to render the page at required scale Var scale_required = _CANVAS.width / pdf_original_width as the canvas is of a fixed width we need to adjust the scale of the viewport where page is rendered Var pdf_original_width = page.getViewport(1).width
#EXTRACT PDF INFO INTO VARIABLES IN WEB PDF#
original width of the pdf page at scale 1 Var page = await _PDF_DOC.getPage(page_no) while page is being rendered hide the canvas and show a loading messageĭocument.querySelector("#pdf-canvas").style.display = 'none' ĭocument.querySelector("#page-loader").style.display = 'block' ĭocument.querySelector("#pdf-current-page").innerHTML = page_no disable Previous & Next buttons while page is being loadedĭocument.querySelector("#pdf-next").disabled = true ĭocument.querySelector("#pdf-prev").disabled = true load and render specific page of the PDF Hide the pdf loader and show pdf containerĭocument.querySelector("#pdf-loader").style.display = 'none' ĭocument.querySelector("#pdf-contents").style.display = 'block' ĭocument.querySelector("#pdf-total-pages").innerHTML = _TOTAL_PAGES pdf_doc holds the handle to the PDF document normal url to a PDF or a local object url created while uploading PDF If you have a base-64 encoded data, you can convert it to a binary string through atob function. You can also pass binary data as a parameter.
![extract pdf info into variables in web extract pdf info into variables in web](https://images.wondershare.com/pdfelement/pdfelement/7-guide/extract-data-01.jpg)
![extract pdf info into variables in web extract pdf info into variables in web](https://i.ytimg.com/vi/2ainbjkQFyI/maxresdefault.jpg)
In case you would like to display the PDF during upload, a local url of the PDF can be generated through URL.createObjectURL() function. Cross Domain PDFs are allowed but CORS headers need to be set in the server. Pdf_url is the url to a PDF file in your server. In simple words, PDFDocumentProxy is the handle of the current PDF file.
![extract pdf info into variables in web extract pdf info into variables in web](https://venturebeat.com/wp-content/uploads/2018/10/LinkedIn-Learning-Skills-Insights.png)
The return value is a Promise which resolves with a PDFDocumentProxy object. This asynchonous method loads the PDF file. This object provides a number of APIs that you can call in your Javscript code. When you include the PDF.JS script files, you get a pdfjsLib global object. Download Example Codes Download PDF.JS APIs Used in This Tutorial