SoFunction
Updated on 2025-04-06

Vue uses pdfjs to display PDF copyable implementation method

Method of displaying pdf

Method 1

Use embed tags to use the browser's own PDF tool.

The advantages and disadvantages of this implementation are obvious:

Advantages: It comes with "print", "search", "page turn" and other functions, which are powerful and convenient to implement.

Disadvantages: The styles of pdf tools in different browsers are different and cannot meet personalized needs, such as: printing, downloading, etc.

Method 2

Use Mozilla, customize the presentation PDF.

  • Basic function integration
  • Rendering with Text-Layers (can realize pdf content copying)

What is

Built based on HTML5 technology, it is used to present files in portable document formats (PDFs), which can be used in modern browsers without installing any third-party plug-ins.

Install:

npm install pdfjs-dist

There are two files that must be referenced in the basic function:

If you use CDN, just refer to the corresponding file as follows:

  • //build/
  • //build/

If you use npm, you will refer to the following in the file you need to use:

import PDFJS from 'pdfjs-dist';

 = 'pdfjs-dist/build/';

These two files contain methods to obtain, parse and display PDF documents, but parsing and rendering PDFs takes a long time and may block the run of other JS code.

To solve this problem, it relies on the introduction of HTML5.Web Workers——Enhance performance by removing a large number of CPU operations (such as parsing and rendering) from the main thread.

The API will return a promise, allowing us to handle asynchronous operations elegantly.

use

This article only introduces the use in vue. Below is a component written by yourself that can be used directly.

Note: For details, please refer to the comments in the code below.

<template>
  <!--<button @click="scalBig">enlarge</button>-->
  <!--<button @click="scalSmall">Shrink</button>-->
  <!--<p>page number：{{`${pageNo}/${}`}}</p>-->
  <div class="drag-box"  @scroll="scrollfun($event)">
   <el-scrollbar style="height: 100%;overflow-y: hidden;">
   <div class="wrapper" >
    <div v-for="item in totals" : :key="item" class="pdf-box">
     <canvas : class="canvas-pdf"></canvas>
    </div>
   </div>
   </el-scrollbar>
  </div>
</template>

<script>
import PDFJS from 'pdfjs-dist'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
export default {
 name: 'showPdf',
 props: ['pdfUrl'],
 data () {
  return {
   scale: 1.4,
   totals: [],
   pageNo: 1,
   viewHeight: 0
  }
 },
 mounted () {
  ()
 },
 watch: {
  scale (val) {
    = []
   (val)
  }
 },
 methods: {
  renderPdf (scale) {
    = require('pdfjs-dist/build/')
   // When the PDF address is cross-domain, the PDF should be transmitted in a stream, otherwise the PDF will be damaged and cannot be displayed.   ().then(pdf => {
    // Get the total number of pages of PDF    let totalPage = 
    let idName = 'canvas-pdf-'
    // Create the same number of canvas based on the total number of pages    (totalPage, idName)
    for (let i = 1; i <= totalPage; i++) {
     (i).then((page) => {
      let pageDiv = (`page-${i}`)
      let viewport = (scale)
      let canvas = (idName + i)
      let context = ('2d')
       = 
       = 
       = 
      let renderContext = {
       canvasContext: context,
       viewport
      }
      // If you just show pdf without copying pdf content function, you can write render like this      // (renderContext) If you need to copy, write to use text-layer like the following      (renderContext).then(() => {
       return ()
      }).then((textContent) => {
       // Create text layer div       const textLayerDiv = ('div')
       ('class', 'textLayer')
       // Add text layer div to div of pdf per page       (textLayerDiv)
       // Create a new TextLayerBuilder instance       let textLayer = new TextLayerBuilder({
        textLayerDiv: textLayerDiv,
        pageIndex: ,
        viewport: viewport
       })
       (textContent)
       ()
      })
     })
    }
   })
  },
  createCanvas (totalPages) {
   for (let i = 1; i <= totalPages; i++) {
    (i)
   }
  },
  // Pagination  scrollfun (e) {
   let scrollTop = 
   if (scrollTop === 0) {
     = 1
   } else {
     = (scrollTop / )
   }
  },
  // Zoom in  scalBig () {
    =  + 0.1
  },
  // Shrink  scalSmall () {
   if ( > 1.2) {
     =  - 0.1
   }
  }
 }
}
</script>

<style scoped lang="scss">
 .drag-box {
  height: 800px;
 }
 .pdf-box {
  position: relative;
 }
 .el-scrollbar__wrap {
  overflow-x: hidden;
 }
</style>

This is the introduction to displaying and copying PDF content, and the update will continue to be updated to realize download, printing and other functions.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.