vue3中使用pdfjs-dist预览pdf
本帖最后由 安云 于 2021-3-16 09:07 编辑# vue 预览pdf
### 推荐几款觉得不错得预览pdf插件
(http://mozilla.github.io/pdf.js/)
(https://github.com/mozilla/pdfjs-dist)
(https://github.com/FranckFreiburger/vue-pdf)
vue-pdf 感觉使用是最简单的，本文主要是介绍vue3.0中预览pdf，但是由于vue-pdf 在vue3.0中不支持，所以就不说明了。
vue2.0推荐大家使用vue-pdf
话不多说，马上上主菜
#### 一丶安装
```
npm install pdfjs-dist@2.5.207
```
@后面加版本号，npm程序会下载固定版本的包。为啥要用这个版本，因vue-3.0中使用过高或者过低的版本，会报错。
因本人工作进度，也没详细去了解
####二丶封装pdfjs-dist
找到node-modules>pdfjs-dist>es5文件夹
复制文件夹里面文件到public>static>pdf(新建pdf文件夹)
1.新建components>pdf>pdf.js (主要是对pdf封装)
import getPdfjsDist from './getPdfjsDist'
export default {
name: 'Pdf',
props: {
url: {
type: String,
default: ''
},
type: {
type: String,
default: 'canvas'
},
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}/pdf/cmaps/`;
console.log( this.CMAP_URL)
pdfjsLib = window.pdfjsLib;
pdfjsLib.GlobalWorkerOptions.workerSrc = `${this.pdfjsDistPath}/pdf/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>
)
}
}
2 新建components>pdf>getPdfjsDist(获取文件)
```
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}/pdf/build/pdf.js`)
.then(() => {
return Promise.all([
getJavsScript(`${pdfjsDistPath}/pdf/web/pdf_viewer.js`),
getCss(`${pdfjsDistPath}/pdf/web/pdf_viewer.css`)
])
})
}
export default getPdfjsDist
####三丶页面使用
```
<template>
<div style="width:100%;overflow:hidden;padding-top:50px">
<!-- canvas渲染方式 -->
<pdf :url="pdfUrl" :type="'canvas'" :pdfjsDistPath="'/static'" />
</div>
</div>
</template>
import pdf from "@/components/PDF/pdf";
export default {
components: {
},
data() {
return {
pdfUrl: "",
};
},
created() {
this.pdfUrl = this.$route.query.src;
}
```
备注：
关于印章不显示的问题
public>static>pdf>build>pdf.worker.js
if (data.fieldType === "Sig") {
data.fieldValue = null;
// 注释下面这句话
// _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}
```
蓝奏云 下载:https://wws.lanzouj.com/i4tWEmzdqij 密码:3v70 感谢楼主分享优质代码 谢谢分享 感谢分享，收藏学习了{:1_921:} 这种文章都是应该感谢的。 感谢分享，先收藏，正好再学vue。 非常感谢，大佬有没有分页的代码 dxxbjl 发表于 2022-2-25 12:48
非常感谢，大佬有没有分页的代码
分页的话，你有element框架里面的组件就行，我的分页可能不太合适你 写了个假分页，终结！ 嘟嘟嘟嘟嘟嘟
页:
[1]
2