1. The introduction of the two main js file
<script src="../js/pdf.js"></script> <script src="../js/pdf.worker.js"></script>
2. The main js code
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) {
The let $ = $ POP // ( '# POP');
// when judged that the current missile frame width smaller than the width of the PDF file, and the viewport scale value twice re-assignment
if (popWidth <viewport.width) {
let $pop = document.getElementById("pop");
let shownPageCount = pdf.numPages <50 pdf.numPages: ? 50; // set the display of coding
// async / await PDF pages to solve problems in different places
the let getPageAndRender the async = function (pageNumber) {
the let popWidth = document.getElementById ( "POP" ) .offsetWidth;
the let the await pdf.getPage Page = (the pageNumber)
the let Scale = 2;
the let = page.getViewport the viewport (Scale);
the let $ Canvas = document.createElement ( "Canvas");
Scale = popWidth / viewport.width * 2;
the 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. Component
<div id="container">
<el-scrollbar class="page-component__scroll">
<div id="pop"></div>
</el-scrollbar>
</div>
4. The results are as follows:
