組件封裝
這邊以vue-cli3生成的項(xiàng)目為例
- 安裝相關(guān)文件
npm install pdfjs-dist@2.4.456 --save
-
將node_modules中的pdfjs-dist/es5/build，pdfjs-dist/es5/web鳍刷，pdfjs-dist/cmaps拷貝到public目錄下秽荞，
這邊也可以將修改好的源碼上傳到cdn阀蒂，引用會(huì)更加方便驮捍。
引入pdfjs-dist -
(可選) 修改打開電子簽章顯示的代碼
public/pdfjs-dist/es5/build/pdf.worker.js
pdf.work.js
-
在components下新建pdf文件夾
pdf
getPdfjsDist代碼如下
// src/components/pdf/getPdfjsDist.js
const getJavsScript = (src) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.onload = resolve
script.onerror = reject
script.src = src
document.body.append(script)
})
}
const getCss = (href) => {
return new Promise((resolve, reject) => {
const link = document.createElement('link')
link.onload = resolve
link.onerror = reject
link.setAttribute('rel', 'stylesheet')
link.setAttribute('type', 'text/css')
link.href=href
document.body.append(link)
})
}
const getPdfjsDist = (pdfjsDistPath) => {
return getJavsScript(`${pdfjsDistPath}/pdfjs-dist/es5/build/pdf.js`)
.then(() => {
return Promise.all([
getJavsScript(`${pdfjsDistPath}/pdfjs-dist/es5/web/pdf_viewer.js`),
getCss(`${pdfjsDistPath}/pdfjs-dist/es5/web/pdf_viewer.css`)
])
})
}
export default getPdfjsDist
index.js代碼如下
// src/components/pdf/index.js
import './index.less'
import Pdf from './pdf'
Pdf.install = (Vue) => {
Vue.component(Pdf.name, Pdf);
};
export default Pdf
pdf.js代碼如下
// src/components/pdf/pdf.js
import getPdfjsDist from '@/components/pdf/getPdfjsDist'
export default {
name: 'Pdf',
props: {
url: {
type: String,
default: ''
},
type: {
type: String,
default: 'svg'
},
pdfjsDistPath: {
type: String,
default: '.'
}
},
data() {
return {
pdfViewer: null,
pdfLinkService: null,
currentScale: 'page-width',
loadingTask: null
}
},
methods: {
onPagesInit({source}) {
source.currentScaleValue = this.currentScale
},
async pdfLibInit() {
let pdfjsLib = window.pdfjsLib;
let pdfjsViewer = window.pdfjsViewer
if (!pdfjsLib || !pdfjsViewer) {
try {
await getPdfjsDist(this.pdfjsDistPath)
this.CMAP_URL = `${this.pdfjsDistPath}/pdfjs-dist/cmaps/`
pdfjsLib = window.pdfjsLib;
pdfjsLib.GlobalWorkerOptions.workerSrc = `${this.pdfjsDistPath}/pdfjs-dist/es5/build/pdf.worker.js`
pdfjsViewer = window.pdfjsViewer
} catch (error) {
// console.log(error)
// pdfjs文件獲取失敗
return
}
}
const container = this.$refs.container
const eventBus = new pdfjsViewer.EventBus();
// (Optionally) enable hyperlinks within PDF files.
const pdfLinkService = new pdfjsViewer.PDFLinkService({
eventBus: eventBus,
});
this.pdfLinkService = pdfLinkService
const pdfViewer = new pdfjsViewer.PDFViewer({
container: container,
eventBus: eventBus,
linkService: pdfLinkService,
renderer: this.type,
textLayerMode: 0,
downloadManager: new pdfjsViewer.DownloadManager({}),
enableWebGL: true
});
this.pdfViewer = pdfViewer
pdfLinkService.setViewer(pdfViewer);
eventBus.on("pagesinit", this.onPagesInit);
},
renderPdf() {
if (!this.url) { return }
// Loading document.
if (this.pdfViewer === null || this.pdfLinkService === null) {
return
}
if (this.loadingTask !== null) {
this.loadingTask.destroy()
this.loadingTask = null
}
this.loadingTask = window.pdfjsLib.getDocument({
cMapUrl: this.CMAP_URL,
cMapPacked: true,
url: this.url,
});
return this.loadingTask.promise.then((pdfDocument) => {
if (pdfDocument.loadingTask.destroyed || !this.url) { return }
this.pdfViewer.setDocument(pdfDocument)
this.pdfLinkService.setDocument(pdfDocument, null);
this.loadingTask = null
}).catch(error => {
console.log(error)
});
}
},
mounted() {
this.pdfLibInit().then(() => {
this.renderPdf()
})
},
watch: {
url() {
// 如果存在pdfViewer則取消渲染
if(this.pdfViewer) {
this.pdfViewer._cancelRendering()
}
this.renderPdf()
}
},
render() {
return (
<div class="pdf-view">
<div id="viewerContainer" ref="container">
<div id="viewer" class="pdfViewer" />
</div>
</div>
)
}
}
最終在組件中使用方式如下：
<div style="width:320px;height:560px">
<!-- canvas渲染方式 -->
<pdf url="./helloworld.pdf" type="canvas" />
<!-- svg渲染方式 -->
<pdf url="./helloworld.pdf" type="svg" />
</div>
依然未解決的問題
- 發(fā)現(xiàn)使用svg渲染的過程中危虱，依然有部分pdf的電子簽章赫舒，無(wú)法顯示出來悍及。暫時(shí)也無(wú)法解決
- win10 chrome(版本：62.0.3202.94)
Funtouch OS PD1803_A_1.20.4 自帶瀏覽器 Mozilla/5.0(Linux;Android 8.1.0;vivo Y83A Build/011019;vw)AppleWebKit/537.36(KHTML, like Gecko)Ghrome/62.0.3202.84 Mobile Safari/537.36 VivoBrowser/8.2.10.0 渲染部分表格會(huì)出現(xiàn)黑塊
