本文主要是系统中需要查看pdf文件的地方较多，将此功能封装成一个独立的组件来使用，使用插件pdfjs-dist。
1、引入组件： import ViewBase64Pdf from '@/components/ViewBase64Pdf'
2、注册组件：components: { ViewBase64Pdf }
3、使用组件： <ViewBase64Pdf v-if="base64pdfStr" :base64-str="base64pdfStr" :scale="1.2" />
<template>
<div class="view-pdf-container">
<canvas v-for="item in pageNum" :ref="'pdf' + item" :key="item + 'view'" class="view-pdf" :title="item" />
</div>
</template>
\
<script>
import PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
export default {
name: '',
props: {
// base64pdf字符串
base64Str: {
type: String,
default: ''
\
},
// 缩放倍数
scale: {
type: Number,
default: 1.7
},
// 模式
mode: {
type: String,
default: 'scroll' // scroll flip
}
},
data() {
return {
pageNum: 1 // pdf总页数
}
},
watch: {
base64Str: {
immediate: true,
handler: function(newVal, oldVal) {
if (newVal) this.showPdf()
}
}
},
methods: {
// 查看pdf影像
async showPdf() {
const data = this.base64Str
const decodedBase64 = atob(data.replace(/[\r\n]/g, '')) // 使用浏览器自带的方法解码(先去掉字符串中的换行和回车防止IE环境报错)
const pdf = await PDFJS.getDocument({ data: decodedBase64 }) // 返回一个pdf对象
const scale = this.scale // 缩放倍数，1表示原始大小
this.pageNum = pdf.numPages // 声明一个pages变量等于当前pdf文件的页数
for (let item = 1; item < this.pageNum + 1; item++) {
const canvas = this.$refs['pdf' + item][0]
const page = await pdf.getPage(item) // 调用getPage方法传入当前循环的页数,返回一个page对象
const viewport = page.getViewport(scale)
const context = canvas.getContext('2d') // 创建绘制canvas的对象
canvas.height = viewport.height // 定义canvas高和宽
canvas.width = viewport.width
const renderContext = {
canvasContext: context,
viewport: viewport
}
await page.render(renderContext)
}
}
}
}
</script>
<style lang="scss" scoped>
.view-pdf-container {
width: 100%;
.view-pdf {
margin-left: 50%;
transform: translate(-50%,0);
}
}
</style>
\
