pdfjs使用心得

PDF.js、pdf.js是一款使用HTML5 Canvas安全地渲染PDF文件以及遵从网页标准的网页浏览器渲染PDF文件的JavaScript库。安德里亚斯·加尔于2011年发起之后由Mozilla基金会主导。 PDF.js可以作为浏览器或网站的一部分运行
——- 维基百科

PDF.js在VUE的应用

1
npm i pdfjs-dist

在项目中安装pdfjs-dist

为了访问方便,把node_modules文件中的pdf-dist抽到static静态目录下

  • 引入worker.js 避免pdf解析阻塞页面的渲染
  • 引入cmaps 解决有些pdf只显示图片,不显示文字的情况,如果pdf能正常显示则不需要引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import pdfObj from 'pdfjs-dist';
// 引入worker.js 使用js worker 新开线程进行pdf的解析,节省了主线程的消耗,防止pdf解析过慢影响页面的渲染速度
pdfObj.GlobalWorkerOptions.workerSrc = 'static/js/pdf.worker.js';
pdfObj
.getDocument({
url: process.env.VUE_APP_BASE_API + this.pdf_url,
// cmaps 引入cmaps的原因是,有些pdf只能解析图片,文字显示不出
// 个人觉得原因一可能是有些是文字和图片分层的,pdfjs只解析了图片的那一层;
// 原因二:有些pdf字体pdfjs不能识别,所以需要三方字体包来解析
cMapUrl: 'static/cmaps/',
cMapPacked: true
})
.then(res => {
this.totleNum = res.numPages;
this.pdfInstance = res;

for (let i = 1; i <= this.totleNum; i++) {
this.renderPage(i);
}
});
}

得到pdf解析后的实例后,循环渲染pdf的每一页数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

renderPage(num) {
pageRendering = true;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Using promise to fetch the page
this.pdfInstance.getPage(num).then(page => {
// page.getTextContent().then(textContent => {
// console.log(textContent);
// });

var viewport = page.getViewport({ scale: scale });
// debugger;
canvas.height = viewport.height;
canvas.width = viewport.width;

// Render PDF page into canvas context
// 把pdf数据渲染到canvas里面
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);

// Wait for rendering to finish
renderTask.promise.then(() => {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
this.renderPage(pageNumPending);
pageNumPending = null;
} else {
// 把渲染之后的canvas插入到dom中
document.querySelector('div').append(canvas);
}
});
});
}