​

Vue project PDF online preview using PDFJS-DIST

You may need an appropriate loader to handle this file type. You may need an appropriate loader to handle this file type.

NPM install -s [email protected]Copy the code

2, use,

<template> <div> <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas> </div> </template> <script>  import PDFJS from "pdfjs-dist" export default { name: "pdfPreview", data(){ return { pdfDoc: null, pages: 0 } }, mounted() { this.showPdf() }, methods: { showPdf: Function () {let url = '/static/player.pdf'; // let url = '/ PDF /showPdf? pdfUrl=http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf 'let url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' enclosing loadFile (url)}, renderPage: function (num) { let _this = this this.pdfDoc.getPage(num).then(function (page) { let canvas = Document. GetElementById (' the - canvas + num) let CTX = canvas. GetContext (' 2 d) let DPR = window. DevicePixelRatio | | 1.0 let bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || CTX. OBackingStorePixelRatio | | CTX. BackingStorePixelRatio | | 1.0 let thewire = DPR/BSR let viewport = page.getViewport(window.screen.availWidth / page.getViewport(1).width) canvas.width = viewport.width * ratio canvas.height = viewport.height * ratio canvas.style.width = viewport.width + 'px' canvas.style.height = viewport.height  + 'px' ctx.setTransform(ratio, 0, 0, ratio, 0, 0) var renderContext = { canvasContext: ctx, viewport: viewport } page.render(renderContext) if (_this.pages > num) { _this.renderPage(num + 1) } }) }, loadFile: function (url) { let _this = this PDFJS.getDocument(url).then(function (pdf) { _this.pdfDoc = pdf _this.pages = _this.pdfDoc.numPages _this.$nextTick(() => { _this.renderPage(1) }) }) } } } </script> <style scoped> canvas { display:  block; border-bottom: 1px solid black; } </style>Copy the code

3, note: the above only supports the display of PDF, does not support copying, supporting the writing of copying is shown below:

<template> <! <button @click="scalBig"> </button>--> <! <button @click="scalSmall"> </button>--> <! -- < p > page number: {{`${pageNo}/${totals.length}`}}</p>--> <div class="drag-box" id="dragBox" @scroll="scrollfun($event)"> <el-scrollbar style="height: 100%; overflow-y: hidden;" > <div class="wrapper" id="pdf-container"> <div v-for="item in totals" :id="`page-${item}`" :key="item" class="pdf-box">  <canvas :id="'canvas-pdf-' + item" 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: Total: [], pageNo: 1, viewHeight: 0}}, Mounted () {this.renderpdf (this.scale)}, watch: total: [], pageNo: 1, viewHeight: 0}, Mounted () {this.renderpdf (this.scale)}, watch: { scale (val) { this.totals = [] this.renderPdf(val) } }, methods: {{renderPdf (scale). PDFJS workerSrc = the require (' PDFJS - dist/build/PDF. Worker. Min ') / / when PDF address for cross-domain, PDF should have stream in the form of transport, There will be a PDF damage won't be able to show PDFJS. GetDocument (' http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf '). Then (PDF) Let totalPage = PDF. NumPages let idName = 'canvas- PDF -' // Create the same canvas based on the total number of pages this.createCanvas(totalPage, idName) for (let i = 1; i <= totalPage; i++) { pdf.getPage(i).then((page) => { 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 are just displaying the PDF without copying the PDF content function, Render // page. Render (renderContext) then(() => {return: render // page. Render (renderContext Page.gettextcontent ()}).then((textContent) => {// create textLayerDiv const textLayerDiv = document.createelement ('div') textLayerDiv.setAttribute('class', 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; i <= totalPages; i++) { this.totals.push(i) } }, // Paging scrollFun (e) {let scrollTop = e.target.scrollTop if (scrollTop === 0) {this.pageno = 1} else {this.pageno = Math.ceil(scrollTop/this.viewheight)}}, // scalBig () {this.scale = this.scale + 0.1}, // scalSmall () {if (this.scale > 1.2) {this.scale = this.scale-0.1}}}} </script> <style scoped >.drag-box {// script> <style scoped >.  height: 800px; background-color: lightgray; } .pdf-box { position: relative; } .el-scrollbar__wrap { overflow-x: hidden; } </style>Copy the code

​