第一步：先下載pdfjs，網址：PDF下載地址，再引入到項目中，我是標簽直接引用的
<script src="pdfjs/build/pdf.js"></script>
<script src="pdfjs/build/pdf.worker.js"></script>
第二步：html代碼添加兩行代碼，一個是canvas用來繪圖，一個是img用來最后展示轉換后的pdf圖片
<body>
<img :src="imgUrl" alt="" width="100%" height="auto">
<canvas id="the-canvas" style="display: none"></canvas>
</body>
第三步：js代碼塊，主要是將paf通過pdfjs插件繪制到canvas，然后再轉換為base64格式的圖片
//url參數是pdf地址，imgUrl是最后的base64格式圖片
showPdf(url) {
let _this = this;
let imgArr = [];
pdfjsLib.workerSrc = 'pdf.worker.js';
let loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
let pageNum = pdf.numPages;
// console.log(pageNum);
for (let i=1; i<=pageNum; i++) {
pdf.getPage(i).then(function(page) {
console.log('Page loaded');
let scale = 1;
let viewport = page.getViewport(scale);
// let canvas = document.getElementById('the-canvas');
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
let renderContext = {
canvasContext: context,
viewport: viewport
};
let renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
let imgUrl = canvas.toDataURL('image/jpeg'); //轉換為base64
if (imgUrl) {
imgArr[i-1] = imgUrl;
}
//pdf全部畫完結束后操作
if (imgArr.length==pageNum&&!isEmpty(imgArr)) {
// let canvas2 = document.createElement("canvas");
let canvas2 = document.getElementById('the-canvas');
let context2 = canvas2.getContext('2d');
canvas2.height = viewport.height*pageNum;
canvas2.width = viewport.width;
let count = 0;
for (let j=0; j<imgArr.length; j++) {
let IMG = new Image();
IMG.src=imgArr[j];
IMG.width = viewport.width;
IMG.height = viewport.height;
IMG.onload = function () {
context2.drawImage(IMG,0,viewport.height*j);
count++;//確保所有img渲染結束后操作
if (count==pageNum) {
let canvas = document.getElementById('the-canvas');
//賦值給img
_this.imgUrl = canvas.toDataURL('image/jpeg');
}
}
}
}
});
});
}
}, function (reason) {
console.error(reason);
});
function isEmpty(arr) {
for(let i=0;i<arr.length;i++) {
if(!arr[i])
return true;
}
return false;
}
}
轉載於：https://blog.csdn.net/xxjiushini/article/details/109473403?utm_medium=distribute.pc_category.none-task-blog-hot-6.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-6.nonecase
