本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
以前用vue2的时候有个需求是在项目中使用pdf.js，其实以前也用过 pdf.js，以前是用 pdf.js把整个详情页面导出为 pdf，这次是需要用 pdf.js把后台的 pdf转为图片显示在页面上。我是把 pdf 转为 canvas 显示的。
废话不多说，先说用法：
- 先安装 pdf.js
npm install pdfjs-dist
我看网上也有说在官网下载项目，再把 pdf.js的包放进自己项目的，但我们要用npm安装，所以需要下载的自己去官网下载：
pdf.js 官网 link
- 引入 pdf.js 和 pdf.js worker
import * as pdfjsLib from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
- 使用：
mounted() {
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
let winW = document.documentElement.clientWidth;
// pdf 的 localhost地址是把用来做测试的pdf放在了项目里，实际运用可以用后台返回的线上地址
let pdfUrl = 'http://localhost:8080/helloworld.pdf';
let loadingTask = pdfjsLib.getDocument(pdfUrl);
loadingTask.promise.then((pdf) => {
console.log(pdf);
let pageNum = pdf.numPages
this.totalPage = pageNum;
for (let i = 1; i <= pageNum; i++) {
pdf.getPage(i).then((page) => {
let viewport = page.getViewport({ scale: 1.5, });
let scale = (winW / viewport.width).toFixed(2)
let scaledViewport = page.getViewport({ scale: 1.5, })
let canvas = document.getElementById('the-canvas' + i)
let context = canvas.getContext('2d')
canvas.height = scaledViewport.height
canvas.width = scaledViewport.width
let renderContext = {
canvasContext: context,
viewport: scaledViewport
}
let renderTask = page.render(renderContext)
renderTask.promise.then(() => {
})
})
}
}, function (reason) {
console.error(reason)
})
},
别忘了html容器 —— canvas：
<canvas v-for="item in totalPage" :key="item" :id='"the-canvas" + item' class="pdf-content"></canvas>
使用方法说完了，再说说踩过的坑：
1.loadingTask 是 promise，所以要用官网例子的写法：
- page.render() 也是代码 promise，官网的例子中没有写 .prmise，在我项目中报错了，加了 .promise这个写法才正常：
-
如果你写前端页面的时候没有后台联调，用自己的本地 pdf做demo，那你要注意本地pdf的位置！！！
我看网上说是放在 static文件夹中，但是我们项目没有 static，是用public文件夹做输出，所以放在了 public中，引用的时候直接是 localhost 地址：
// 此处引用直接是http://localhost:8080下的pdf，不用写public，因为public文件夹是输出的文件夹
let pdfUrl = 'http://localhost:8080/helloworld.pdf';
自己随便找个本地的 pdf 放在public中就行了，此处我用的是官网示例中的 helloworld.pdf。
- 不算是坑，算是小经验吧：
在做图片显示的时候：page.getViewport({ scale: 1.5, }) 中scale 是控制 canvas的大小的，以为是几倍显示，因为scale设为1的话图片显示有点小，所以我用了1.5，这个根据自己需要调整。 可能还有一些别的坑我没遇到，欢迎遇到的小伙伴分享，避免大家踩坑。
希望此文能对你有所帮助。
