当前位置：网站首页>PDF在线预览，pdf.js的使用

PDF在线预览，pdf.js的使用

2022-07-23 05:46:00 【北海怪兽Monster】 

<!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>
    <!-- 这两个插件在资源里面有，也可以自己去官网下，我这个使用的版本比较低，是2.0.X的， 具体版本号忘了，版本越高对于浏览器的版本要求也就越高 -->
</head>
<body>



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


<script> // 展示pdf function initPdf(url) {
       var loadingTask = pdfjsLib.getDocument(url); var pdfDiv = document.getElementById('pdfDiv');//这里的pdfDiv和上面容器中的id对应 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 = '可以是本地文件路径，也可以是网络文件路径'; initPdf(filePath);// filePath是要预览的pdf地址，D:\nginx-1.21.1\html\fzzd\resource\articleFile\20220420\053129003.pdf </script>

</body>
</html>
原网站

版权声明
本文为[北海怪兽Monster]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_48639280/article/details/125314433

边栏推荐

猜你喜欢

随机推荐