1.引入两个主要js文件
<script src="../js/pdf.js"></script>
<script src="../js/pdf.worker.js"></script>
2.主要js代码
let container = document.getElementById("container");
let popId = document.getElementById("pop");
let childs = popId.childNodes;
for(let i = childs.length - 1; i >= 0; i--) {
popId.removeChild(childs[i]);
}
container.style.display = "block";
let url = 'http://192.168.0.176:8020/project/HQS20190811104441.pdf';
// let url = 'http://192.168.0.176:8020/project/2019_PDF.pdf';
pdfjsLib.workerSrc = '../js/pdf.worker.js';
pdfjsLib.getDocument(url).then(function getPdfHelloWorld(pdf) {
// let $pop = $('#pop');
let $pop = document.getElementById("pop");
let shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;//设置显示的编码
//async/await解决PDF页面异地问题
let getPageAndRender = async function (pageNumber) {
let popWidth = document.getElementById("pop").offsetWidth;
let page = await pdf.getPage(pageNumber)
let scale = 2;
let viewport = page.getViewport(scale);
let $canvas = document.createElement("canvas");
//判断当前弹框的宽度小于PDF文件的宽度时,将viewport和scale的值重新2倍赋值
if( popWidth < viewport.width){
scale = popWidth / viewport.width * 2;
viewport = page.getViewport(scale);
}
$canvas.width = viewport.width*2;
$canvas.height = viewport.height*2;
$canvas.style.width = viewport.width+'px';
$canvas.style.height = viewport.height+'px';
$pop.appendChild($canvas);
let content = $canvas.getContext('2d');
content.scale(2,2);
page.render({
canvasContext: content,
viewport: viewport
});
if (pageNumber < shownPageCount) {
pageNumber++;
getPageAndRender(pageNumber);
}
};
getPageAndRender(1)
});
3.组件
<div id="container">
<el-scrollbar class="page-component__scroll">
<div id="pop"></div>
</el-scrollbar>
</div>
4.效果如下: