share

Sometimes we want to switch to a preview PDF, so we borrow a few methods and wrap a component ourselves to use. Vue uses VUE-PDF to achieve the functionality of preview PDF is the simplest solution.

Quick learning

The installation

npm install --save vue-pdf
or
yarn add vue-pdf
Copy the code

The introduction of

import pdf from 'vue-pdf'
Copy the code

Certified components

components: {
	pdf
},
Copy the code

use

Basic introduction

<pdf ref="pdf" :src="pdfUrl"></pdf>
Copy the code

If directly according to the above introduction, there will be a problem, show a page, so the Internet to find many ways to improve

The current requirement is to display the scrollbar scroll page directly, and if paging is required, more will be added in the future

< PDF v-for="item in numPages" :key="item" : SRC =" SRC ":page="item" class=" pdF-wrap" /> Can be relative or absolute address, but also a PDF loading task // page need to show the PAGE of the PDFCopy the code

Execute the following method. The URL is the PDF address

Data () {return {numPages: ", SRC: ", // PDF file address}; }, methods: {dealPdf(url) {this.src = pdf.createloadingTask (url); This.src.promise.then ((PDF) => {this.src.promise.then(PDF) => {this.src.promise.then(PDF) => {this.src.promise.then(PDF) => { But then does not define this.numPages = pdf.numPages; }); // createLoadingTask(SRC) This method creates a load task for the current PDF, Can be used as: SRC use or public access to the current total number of page PDF mounted () {enclosing dealPdf (' http://image.cache.timepack.cn/nodejs.pdf ')}Copy the code

On style

.pdf-wrap { width: 740px; Margin: 0 auto; }Copy the code

The actual effect

I use vue-pdf and <el-image-viewer> to implement a component that can switch different.pdf urls

Actual renderings

demo

The demo is on Github. Click demo-03 to view it