下载 pdf.js pdf.worker.js
<template>
<div
id="canvas_pdf"
class="scrollBar"
></div>
</template>
<script>
export default {
name: "viewPdf",
data() {
return {};
},
mounted() {
this.createCanvasPDF("http://110.16.77.198:27107/api"+this.$route.query.url );
//this.createCanvasPDF("http://110.16.77.198:27107/api/admin/sys-file/myfile/22578f00b234430c8acff2460b153c28.pdf");
},
methods: {
createCanvasPDF(url) {
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then((pdf) => {
// pdf 是文件的信息
let pageNum = pdf._pdfInfo.numPages;
pdf.getPage(1).then((page) => {
// 循环的p为每页的页码
// page为当前的内容信息
var scale = 0.3; // 画布显示的大小比例
var viewport = page.getViewport({ scale: scale });
var outputScale = window.devicePixelRatio || 1;
var parent = document.getElementById("canvas_pdf");
parent.innerHTML = "";
// if (parent.childNodes && parent.childNodes.length == 1) {
// parent.removeChild(parent.childNodes[0]);
// }
let H = Math.floor(viewport.height * outputScale) * pageNum;
//
let W = parent.offsetWidth;
// 创建节点canvas
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.height = H;
canvas.width = W;
var transform =
outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
var renderContext = {
canvasContext: context,
transform: transform,
viewport: viewport,
};
page.render(renderContext);
parent.appendChild(canvas);
});
});
},
},
};
</script>