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

最新推荐文章于 2024-04-16 12:42:57 发布

北海怪兽Monster

最新推荐文章于 2024-04-16 12:42:57 发布

阅读量816

点赞数 1

分类专栏：前端文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/m0_48639280/article/details/125314433

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>