运用vue项目开发遇到预览PDF的功能并要兼容IE11,最开始运用vue-pdf这个插件,后来发现在IE11浏览器不支持。所以使用了pdfjs-dist,下边上代码。
// 安装pdfjs-dist
npm install pdfjs-dist@2.0.943 --save //这里安装这个版本是最为合适的 其他版本可能会出现一些问题
// 安装完成后一定要记得重启项目
// 视图代码 css样式自行去写
<div>
<div>
<span>{{ "pdf" }}</span>
<span>
<img src="@/assets/shape_left.png" alt="" @click="reduceCurrentPage" />
<!-- 这是个上一页图标 -->
{{ current }}/{{ total }}
<img src="@/assets/shape_right.png" alt="" @click="addCurrentPage" />
<!-- 这是个下一页图标 -->
</span>
</div>
<canvas id="the-canvas"></canvas> <!-- 展示pdf的视图容器 -->
</div>
// 接下来在需要的地方引入插件
// 在script中进行引入
const PDF = require("pdfjs-dist")
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"
PDF.GlobalWorkerOptions.workerSrc = pdfjsWorker
// 然后进行在data中定义一些变量
data(){
return {
total: 0, // 拿到的pdf总页数
current: 1, // 拿到的pdf当前页数
pdfUrld: "", // pdf文件路径变量
}
}
//pdf渲染函数
// pageSize为要展示的页数,自己定义上一页下一页函数, url是pdf文件的路径
init(pageSize, url) {
const padUrlsd = url || this.pdfUrld
var loadingTask = padUrlsd
PDF.getDocument(loadingTask).then((pdf) => {
this.total = pdf._pdfInfo.numPages
pdf.getPage(pageSize).then(function(page) {
var viewport = page.getViewport(1.5)
var canvas = document.getElementById("the-canvas")
var context = canvas.getContext("2d")
canvas.height = viewport.height
canvas.width = viewport.width
var renderContext = {
canvasContext: context,
viewport: viewport
}
page.render(renderContext)
})
})
}
// 初始话的时候在created生命周期只需要拿到pdf文件路径然后调用 this.init(1,"拿到的文件路径") 就可以
注意 IE11是不支持baseurl这种形式的文件路径的,如果后端给你的文件路径是baseurl形式的 可以去看我的其他文章 有把baseurl转换为blob路径的方法,希望这篇文章能对各位有所帮助