Read pdf.js of the plug-in that parses and previews the PDF file

Recently, there is a demand for online preview of PDF files, so I went to find plug-ins in this area. Finally, I selected pdf.js as the plug-in.
Let's take a look at the definition of pdf.js:
pdf.js can directly browse pdf documents under html. It is an open-source pdf document reading and parsing plug-in
Pdf.js mainly consists of two library files, one is pdf.js and the other is pdf.worker.js. One is responsible for API parsing and the other is responsible for core parsing
In essence, pdf.js is rendered with canvas. After the PDF file is parsed, it is rendered on canvas to realize preview (look at the source code of pdf.js, first generate graphics with SVG, and then display it on canvas)
So how to use it? As follows:
(the methods are all general and draw on the process written by others)
How to use pdf.js:

Excerpt from (example on official website)

1. pdf.js is introduced into the page.

2. Use PDFJS.getDocument('helloworld.pdf ') to load the PDF file to be opened.

3. Use PDFJS.getDocument('helloworld.pdf '). then(function(pdf){// you can now use pdf here});then process the following methods

4. pdf.getPage(1).then(function(page){// you can now use page here}); the first page to load PDF

5. Display through the canvas of h5.

 // Part html
 <div class="pdf">
    <div class="pdf-show" id="pdf-show">

// Show the code js part written in the pdf file vue
this.showPdf(, 'pdf-show');
pdfShow(url, id, type) {
      // First, define a dom element (defined on the page) to place the pdf file for reading
      let cvsItem = document.getElementById(id);
      cvsItem.innerHTML = "";
      const loading = this.$loading({
        lock: true,
        text: type || 'Loading...',
        target: cvsItem,
        spinner: 'loader',
        background: 'rgba(0, 0, 0, 0.5)',
        customClass: 'loadings'
      // url.replace ("http:",'https: ') this step is because the url returned in the background starts with HTTP, but it needs to be replaced with HTTPS when requesting with url, which is the reason for my project
      PDFJS.getDocument(url.replace("http:", 'https:')).then((pafObj) => {
        cvsItem.innerHTML = "";
        this.isloading = true,
        this.pafDoc = pafObj;
        let totalNum = this.pafDoc.numPages;
        // debugger;
        for (let i = 1; i <= totalNum; i++) {
          let id = 'canvas' + i;
          let cvsNode = document.createElement('canvas');
          cvsNode.setAttribute('id', id);
          cvsNode.setAttribute('class', 'canvas-item');
          if (totalNum === i) {
            this.isloading = false;
      }).catch(err => {
        this.$message({ message: "PDF Failed to load", type: 'error' });
    renderPage(num) {
      // Rendering
      let id = 'canvas' + num;
      let canvas = document.getElementById(id);
      let ctx = canvas.getContext('2d'); // Knowledge of canvas
      this.pageRendering = true;
      this.pafDoc.getPage(num).then(page => {
        let viewport = page.getViewport(this.scale);
        canvas.height = viewport.height; 
        canvas.width = viewport.width; 
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport

Tags: github Vue

Posted on Fri, 08 Nov 2019 08:30:01 -0800 by Buttero