当前位置：网站首页>PDF Online preview, use of pdf.js

PDF Online preview, use of pdf.js

2022-07-23 12:46:00 【Monster in the North Sea】 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../plugins/pdfjs/pdf.min.js" ></script>
    <script src="../plugins/pdfjs/pdf.worker.min.js" ></script>
    <!--  These two plug-ins are in the resources , You can also go to the official website by yourself , The version I use is relatively low , yes 2.0.X Of ,  I forgot the specific version number , The higher the version, the higher the version requirements for the browser  -->
</head>
<body>



    <div id="pdfDiv"></div>


<script> //  Exhibition pdf function initPdf(url) {
       var loadingTask = pdfjsLib.getDocument(url); var pdfDiv = document.getElementById('pdfDiv');// there pdfDiv And the above container id Corresponding  loadingTask.promise.then(function (pdf) {
       for (var i = 1; i <= pdf.numPages; i++) {
       pdf.getPage(i).then(function (page) {
       var scale = 1.5; var viewport = page.getViewport({
      scale: scale,}); // Support HiDPI-screens. var outputScale = window.devicePixelRatio || 1; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); pdfDiv.appendChild(canvas); canvas.width = Math.floor(viewport.width * outputScale); canvas.height = Math.floor(viewport.height * outputScale); canvas.style.width = Math.floor(viewport.width) + "px"; canvas.style.height = Math.floor(viewport.height) + "px"; var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null; var renderContext = {
       canvasContext: context, transform: transform, viewport: viewport }; page.render(renderContext); }); } }); } var filePath = ' It can be a local file path , It can also be a network file path '; initPdf(filePath);// filePath Is for preview pdf Address ,D:\nginx-1.21.1\html\fzzd\resource\articleFile\20220420\053129003.pdf </script>

</body>
</html>
原网站

版权声明
本文为[Monster in the North Sea]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/204/202207230540177869.html

边栏推荐

猜你喜欢

随机推荐