這篇文章主要介紹了vue使用pdfjs顯示PDF可複製的實現方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
pdf顯示的方法
方法一
使用embed標記來使用瀏覽器自帶的pdf工具。
這種實現方式優缺點都很明顯:
優點:自帶“打印”,“搜索”,“翻頁”等功能,強大且實現方便。
缺點:不同瀏覽器的pdf工具樣式不一,且無法滿足個性化需求,比如:禁止打印,下載等。
方法二
使用Mozilla的PDF.js,自定義展示PDF。
- 基礎功能集成
- 使用Text-Layers渲染(可實現pdf內容複製)
什麼是PDF.JS
PDF.js是基於HTML5技術構建的,用於展示可移植文檔格式的文件(PDF),它可以在現代瀏覽器中使用且無需安裝任何第三方插件。
安裝:
npm install pdfjs-dist
基礎功能有兩個必須引用的文件:
- pdf.js
- pdf.worker.js
如果使用CDN的方式,直接引用如下對應文件即可:
如果使用npm的方式,則在需要使用PDF.js的文件中如下引用:
import PDFJS from 'pdfjs-dist'; PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';
這兩個文件包含了獲取、解析和展示PDF文檔的方法,但是解析和渲染PDF需要較長的時間,可能會阻塞其它JS代碼的運行。
爲解決該問題,pdf.js依賴了HTML5引入的Web Workers——通過從主線程中移除大量CPU操作(如解析和渲染)來提升性能。
PDF.js的API都會返回一個Promise,使得我們可以優雅的處理異步操作。
使用
本文章只介紹在vue中的使用, 下面是自己寫的展示pdf的組件可以直接拿去用
注:具體解釋請看下面代碼中的註釋
<template> <!--<button @click="scalBig">放大</button>--> <!--<button @click="scalSmall">縮小</button>--> <!--<p>頁碼:{{`${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: 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') // 當 PDF 地址爲跨域時,pdf 應該已流的形式傳輸,否則會出現pdf損壞無法展示 PDFJS.getDocument(this.pdfUrl).then(pdf => { // 得到PDF的總的頁數 let totalPage = pdf.numPages let idName = 'canvas-pdf-' // 根據總的頁數創建相同數量的canvas 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 } // 如果你只是展示pdf而不需要複製pdf內容功能,則可以這樣寫render // page.render(renderContext) 如果你需要複製則像下面那樣寫利用text-layer page.render(renderContext).then(() => { return page.getTextContent() }).then((textContent) => { // 創建文本圖層div const textLayerDiv = document.createElement('div') textLayerDiv.setAttribute('class', 'textLayer') // 將文本圖層div添加至每頁pdf的div中 pageDiv.appendChild(textLayerDiv) // 創建新的TextLayerBuilder實例 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) } }, // 分頁 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 lang="scss"> .drag-box { height: 800px; } .pdf-box { position: relative; } .el-scrollbar__wrap { overflow-x: hidden; } </style>
pdf.js實現展示和複製PDF內容介紹到這裏,後續會繼續更新實現下載、打印等功能
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。