pdf顯示的方法
方法一
使用embed標(biāo)記來(lái)使用瀏覽器自帶的pdf工具。
這種實(shí)現(xiàn)方式優(yōu)缺點(diǎn)都很明顯：
優(yōu)點(diǎn)：自帶“打印”，“搜索”，“翻頁(yè)”等功能，強(qiáng)大且實(shí)現(xiàn)方便。
缺點(diǎn)：不同瀏覽器的pdf工具樣式不一，且無(wú)法滿足個(gè)性化需求，比如：禁止打印，下載等。
方法二
使用Mozilla的PDF.js，自定義展示PDF。
- 基礎(chǔ)功能集成
- 使用
Text-Layers渲染(可實(shí)現(xiàn)pdf內(nèi)容復(fù)制)
什么是PDF.JS
PDF.js是基于HTML5技術(shù)構(gòu)建的，用于展示可移植文檔格式的文件(PDF)，它可以在現(xiàn)代瀏覽器中使用且無(wú)需安裝任何第三方插件。
安裝：
npm install pdfjs-dist
基礎(chǔ)功能有兩個(gè)必須引用的文件：
- pdf.js
- pdf.worker.js
如果使用CDN的方式，直接引用如下對(duì)應(yīng)文件即可：
如果使用npm的方式，則在需要使用PDF.js的文件中如下引用:
import PDFJS from 'pdfjs-dist';
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';
這兩個(gè)文件包含了獲取、解析和展示PDF文檔的方法，但是解析和渲染PDF需要較長(zhǎng)的時(shí)間，可能會(huì)阻塞其它JS代碼的運(yùn)行。
為解決該問(wèn)題，pdf.js依賴了HTML5引入的Web Workers——通過(guò)從主線程中移除大量CPU操作（如解析和渲染）來(lái)提升性能。
PDF.js的API都會(huì)返回一個(gè)Promise，使得我們可以優(yōu)雅的處理異步操作。
使用1
下面是自己寫的展示pdf的組件可以直接拿去用
注：具體解釋請(qǐng)看下面代碼中的注釋
<template>
<div id="showPdf">
<el-scrollbar ref="elscrollbar" style="height: 800px;overflow-y: hidden;">
<div class="position page">
<span class="span_1" @click="pageUp">上一頁(yè)</span>
<span>頁(yè)碼：{{`${pageNo}/${totals.length}`}}</span>
<span class="span_2" @click="pageDown">下一頁(yè)</span>
</div>
<div class="position info">
<span class="span_1">上傳者：{{pdfInfo.updateBy}}</span>
<span>上傳時(shí)間：{{pdfInfo.updateOn}}</span>
<span class="span_2">附件編號(hào)：{{pdfInfo.workNo}}</span>
</div>
<div class="main_content" id="mainContent" ref="mainContent">
<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 axios from 'axios'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
export default {
name: 'showPdf',
props: ['pdfUrl', 'pdfInfo'],
data () {
return {
scale: 1.2,
totals: [],
pageNo: 1,
viewHeight: 0,
scrollbar: ''
}
},
mounted () {
this.scrollbar = this.$refs['elscrollbar'].$refs['wrap']
this.scrollbar.addEventListener('scroll', this.scrollfun, false)
this.getMainContentWidth()
this.getPdfFun()
},
methods: {
// 當(dāng)PDF地址跨域時(shí)，后臺(tái)以流的形式傳輸PDF
getPdfFun () {
axios({
method: 'get',
url: this.pdfUrl,
data: {},
responseType: 'blob'
}).then(res => {
let url = window.URL.createObjectURL(new Blob([res.data]))
this.renderPdf(url)
})
},
getMainContentWidth () {
let div = this.$refs.mainContent
let width = window.getComputedStyle(div).width
this.contentWidth = parseInt(width)
},
renderPdf (pdfUrl) {
PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min')
PDFJS.getDocument(pdfUrl).then(pdf => {
let totalPage = pdf.numPages
let idName = 'canvas-pdf-'
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 viewportFirst = page.getViewport(1)
// 計(jì)算 scale值，this.contentWidth 為 ref = mainContent 的元素的寬度
let scale = this.contentWidth / viewportFirst.width
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
}
page.render(renderContext).then(() => {
return page.getTextContent()
}).then((textContent) => {
// 創(chuàng)建文本圖層div
const textLayerDiv = document.createElement('div')
textLayerDiv.setAttribute('class', 'textLayer')
// 將文本圖層div添加至每頁(yè)pdf的div中
pageDiv.appendChild(textLayerDiv)
// 創(chuàng)建新的TextLayerBuilder實(shí)例
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)
}
},
/**
* 分頁(yè)
*/
scrollfun (e) {
let scrollTop = e.target.scrollTop
if (scrollTop === 0) {
this.pageNo = 1
} else {
this.pageNo = Math.ceil((scrollTop + 15) / this.viewHeight)
}
},
/**
* 上一頁(yè)
*/
pageUp () {
let totalPages = this.totals.length
if (this.pageNo > 0) {
this.scrollbar.scrollTop = (this.pageNo - 2) * (this.scrollbar.scrollHeight / totalPages)
}
},
/**
* 下一頁(yè)
*/
pageDown () {
let totalPages = this.totals.length
if (this.pageNo < totalPages) {
this.scrollbar.scrollTop = this.pageNo * (this.scrollbar.scrollHeight / totalPages)
}
}
}
}
</script>
<style lang="scss">
#showPdf {
.position {
position: absolute;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 100;
padding: 0 15px;
line-height: 25px;
color: #fff;
.span_1 {
float: left;
}
.span_2 {
float: right;
}
}
.page {
bottom: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.span_1 {
cursor: pointer;
}
.span_2 {
cursor: pointer;
}
}
.info {
top: 0;
}
.pdf-box {
position: relative;
text-align: left;
display: inline-block;
}
}
</style>
使用2
github: vue-pdf-syl
npm install vue-pdf-syl --save
npm install pdfjs-dist --save
使用
<template>
<div id="average">
<vuePdf viewHeight="500px" pdfUrl="static/dddd.pdf"></vuePdf>
</div>
</template>
<script>
import vuePdf from 'vue-pdf-syl'
export default {
name: 'average',
components: {
vuePdf
},
data () {
return {
}
},
mounted () {
}
}
</script>
pdf.js實(shí)現(xiàn)展示和復(fù)制PDF內(nèi)容介紹到這里，后續(xù)會(huì)繼續(xù)更新實(shí)現(xiàn)下載、打印等功能，有不懂的歡迎隨時(shí)騷擾！
