1、
npm install pdfjs-dist@2.2.228
2、在使用它的页面
<script>
import * as PDFJS from 'pdfjs-dist';
</script>
created(){
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
},
mounted(){
this.hanle()
},
//pdf 创建画布
createPdfContainer(id,className) {
var pdfContainer = document.getElementById('pdf-container');
var canvasNew =document.createElement('canvas');
canvasNew.id = id;
canvasNew.className = className;
pdfContainer.appendChild(canvasNew);
this.loadings = false
},
// 渲染pdf 给pdf定宽度
renderPDF(pdf,i,id) {
const _this = this
pdf.getPage(i).then(function(page) {
var scale = 1.67 * (_this.scale > 1 ? _this.scale : 1);
var viewport = page.getViewport(scale);
// 准备用于渲染的 canvas 元素
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height
canvas.width = viewport.width
// canvas.heif
// 将 PDF 页面渲染到 canvas 上下文中
var renderContext = {
canvasContext: context,
viewport:viewport
};
page.render(renderContext);
});
},
//创建和pdf页数等同的canvas数
createSeriesCanvas(num,template) {
const _this = this
var id = '';
for(var j = 1; j <= num; j++){
id = template + j;
_this.createPdfContainer(id,'pdfClass');
}
},
hanle() {
const _this= this
_this.loadings = true
let obj = {
url:_this.dataurl,
password:'自己的密码'
}
PDFJS.getDocument(obj).then(function(pdf) {
//用 promise 获取页面
var id = '';
var idTemplate = 'cw-pdf-';
var pageNum = pdf.numPages;
//根据页码创建画布
_this.createSeriesCanvas(pageNum,idTemplate);
//将pdf渲染到画布上去
for (var i = 1; i <= pageNum; i++) {
id = idTemplate + i;
_this.renderPDF(pdf,i,id);
}
});
},
3、html
<div ref="pdfViewer" id="pdf-container" class="pdfView"></div>