Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use PDF.js to render canvas Preview pdf", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use PDF.js to render canvas preview pdf!

1. Download PDF.js

You can download directly from the official website.

After the download is completed, unpack the package and put it under the project and introduce it according to the normal introduction mode.

2. Use PDF.js1.vue

Step 1 install:

Npm install-save pdfjs-dist

The second step is to introduce:

Import PDFJS from 'pdfjs-dist'

The third step is to use it on the page. Here is a demonstration of the code in export default:

Export default {data () {return {pdfDoc: null, pageNum: 1, pageRendering: false, pageNumPending: null, scale: 0.9}}, methods: {showPDF (url) {let _ this = this PDFJS.getDocument (url). Then (function (pdf) {_ this.pdfDoc = pdf _ this.renderPage (1)})} RenderPage (num) {this.pageRendering = true let _ this = this this.pdfDoc.getPage (num). Then (function (page) {var viewport = page.getViewport (_ this.scale) let canvas = document.getElementById ('the-canvas') canvas.height = viewport.height canvas.width = viewport.width / / Render PDF page into canvas context var renderContext = {canvasContext: canvas.getContext (' 2d') Viewport: viewport} var renderTask = page.render (renderContext) / / Wait for rendering to finish renderTask.promise.then (function () {_ this.pageRendering = false if (_ this.pageNumPending! = = null) {/ / New page rendering is pending this.renderPage (_ this.pageNumPending) _ this.pageNumPending = null})})} QueueRenderPage (num) {if (this.pageRendering) {this.pageNumPending = num} else {this.renderPage (num)}}, onPrevPage () {if (this.pageNum = this.pdfDoc.numPages) {return} this.pageNum++ this.queueRenderPage (this.pageNum)}} 2.HTML (5)

The first step is to download normally, decompress and put it into the project.

The second step is to introduce it on the project page.

As it is a company project, I will cover the name of the project, you can choose your own name, I put the PDF.js into the js directory here, you can also put it directly under the root directory of the project.

Introduce the following code:

The third step is to use it in js.

① introduces a single-page pdf:

Var url = sessionStorage.sencondExperience_filePath;pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';pdfjsLib.getDocument (url). Then (function getPdfHelloWorld (pdf) {pdf.getPage (1). Then (function getPageHelloWorld (page) {var scale = 1; var viewport = page.getViewport (scale); var canvas = document.getElementById (' the-canvas')) Var context = canvas.getContext ('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = {canvasContext: context, viewport: viewport}; page.render (renderContext);});})

It should be noted that in pdfjsLib.workerSrc, if it is changed to PDFJS.workerSrc, it will report an error: PDFJS is notdefined. Some bloggers said that adding PDFJS.disableWorker = true; before it would avoid mistakes, but I tried and the mistakes still existed. There is no error in using pdfjsLib.workerSrc!

② introduces multi-page pdf:

Method 1: set the canvas corresponding to the number of pdf pages in html, and then use js to render canvas page by page.

Html:

Js:

Var url = sessionStorage.third_filePath;pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';pdfjsLib.getDocument (url). Then (function getPdfHelloWorld (pdf) {pdf.getPage (1). Then (function getPageHelloWorld (page) {var scale = 1; var viewport = page.getViewport (scale); var canvas = document.getElementById (' the-canvas01')) Var context = canvas.getContext ('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = {canvasContext: context, viewport: viewport}; page.render (renderContext);}) Pdf.getPage (2) .then (function getPageHelloWorld (page) {var scale = 1; var viewport = page.getViewport (scale); var canvas = document.getElementById ('the-canvas02'); var context = canvas.getContext (' 2d'); canvas.height = viewport.height; canvas.width = viewport.width Var renderContext = {canvasContext: context, viewport: viewport}; page.render (renderContext);}); pdf.getPage (3) .then (function getPageHelloWorld (page) {var scale = 1; var viewport = page.getViewport (scale)) Var canvas = document.getElementById ('the-canvas03'); var context = canvas.getContext (' 2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = {canvasContext: context, viewport: viewport} Page.render (renderContext);})

It is conceivable that this method is more suitable for pdfHIA with fewer pages, but if there are a lot of pages or do not know the number of pages of pdf, this method is obviously not suitable, so method two is recommended.

Method 2: just define the location where you need to render, and then dynamically render pdf according to the number of pages of canvas.

Html:

Js:

/ / PDF into picture var url = sessionStorage.other_filePath;pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';// create function createPdfContainer (id, className) {var pdfContainer = document.getElementById (' canvas'); var canvasNew = document.createElement ('canvas'); $("canvas") .on ("click", function () {var url = sessionStorage.other_filePath; window.open (url)) }) canvasNew.id = id; canvasNew.className = className; pdfContainer.appendChild (canvasNew);}; / render pdf// recommends a given pdf width function renderPDF (pdf, I, id) {pdf.getPage (I). Then (function (page) {var scale = 0.62; var viewport = page.getViewport (scale) / prepare canvas elements for rendering / / var canvas = document.getElementById (id); var context = canvas.getContext ('2d'); canvas.height = viewport.height; canvas.width = document.documentElement.clientWidth / render PDF pages to canvas context / / var renderContext = {canvasContext: context, viewport: viewport}; page.render (renderContext);});}; / / create the same number of canvas as pdf pages function createSeriesCanvas (num, template) {var id ='; for (var j = 1; j)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.