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內容介紹到這裏，後續會繼續更新實現下載、打印等功能，有不懂的歡迎隨時騷擾！