Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to use pdfjs in vue to display the relevant knowledge points that can be copied by PDF. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

The method of pdf display

Method one

Use the embed tag to use the pdf tool that comes with the browser.

The advantages and disadvantages of this implementation are obvious:

Advantages: with "print", "search", "page turning" and other functions, powerful and convenient to achieve.

Disadvantages: different browsers have different styles of pdf tools, and can not meet personalized needs, such as: prohibit printing, download and so on.

Method two

Use Mozilla's PDF.js to customize the display PDF.

Basic function integration

Rendering with Text-Layers (pdf content replication can be achieved)

What is PDF.JS?

PDF.js is built on HTML5 technology to display files in portable document format (PDF) that can be used in modern browsers without installing any third-party plug-ins.

Installation:

Npm install pdfjs-dist

The basic function has two files that must be referenced:

Pdf.js

Pdf.worker.js

If you use the npm approach, the following references are made in the files where you need to use PDF.js:

Import PDFJS from 'pdfjs-dist';PDFJS.GlobalWorkerOptions.workerSrc =' pdfjs-dist/build/pdf.worker.js'

These two files contain methods for fetching, parsing, and displaying PDF documents, but parsing and rendering PDF takes a long time and may block other JS code from running.

To solve this problem, pdf.js relies on Web Workers-- introduced by HTML5 to improve performance by removing a large number of CPU operations (such as parsing and rendering) from the main thread.

PDF.js 's API returns a Promise, which allows us to handle asynchronous operations gracefully.

Use

This article only introduces the use in vue. The following is a self-written display pdf component that can be used directly.

Note: for a specific explanation, please see the comments in the following code

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 () {this.renderPdf (this.scale)} Watch: {scale (val) {this.totals = [] this.renderPdf (val)}}, methods: {renderPdf (scale) {PDFJS.workerSrc = require ('pdfjs-dist/build/pdf.worker.min') / / when the PDF address is cross-domain Pdf should be streamed, otherwise there will be pdf corruption and cannot display PDFJS.getDocument (this.pdfUrl) .then (pdf = > {/ / get the total number of pages of PDF let totalPage = pdf.numPages let idName = 'canvas-pdf-' / / create the same number of canvas this.createCanvas (totalPage, idName) for based on the total number of pages (let I = 1 I {let pageDiv = document.getElementById (`page-$ {I} `) let viewport = page.getViewport (scale) let canvas = document.getElementById (idName + I) let context = canvas.getContext ('2d') canvas.height = viewport.height canvas.width = viewport.width this.viewHeight = viewport.height let renderContext = {canvasContext: context Viewport} / / if you only show pdf and do not need to copy pdf content function You can write render / / page.render (renderContext) if you need to copy, use text-layer page.render (renderContext). Then (() = > {return page.getTextContent ()}). Then ((textContent) = > {/ / create a text layer div const textLayerDiv = document.createElement ('div') textLayerDiv.setAttribute (' class') 'textLayer') / / add the text layer div to the div of each page of pdf pageDiv.appendChild (textLayerDiv) / / create a new TextLayerBuilder instance let textLayer = new TextLayerBuilder ({textLayerDiv: textLayerDiv, pageIndex: page.pageIndex, viewport: viewport}) textLayer.setTextContent (textContent) textLayer.render ()}) CreateCanvas (totalPages) {for (let I = 1) Drag-box {height: 800px;}. Pdf-box {position: relative;}. El-scrollbar__wrap {overflow-x: hidden;} is all the content of this article "how to use pdfjs to display PDF replicable in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.