PDF.JS PDF文件预览插件

最新推荐文章于 2025-11-14 16:23:08 发布

原创最新推荐文章于 2025-11-14 16:23:08 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#PDF.js

Project In Action 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用PDF.js插件在线预览PDF文档，包括下载、引入及使用教程。通过简单的代码实现，即可在网页中加载并浏览PDF文件，支持翻页等功能。

该文章已生成可运行项目，

前言

本篇文章主要介绍一款好用的pdf预览插件pdf.js，使用方式简单只要参考官网实例即可。

PDF.js使用教程

下载pdf.js

PDF.js下载链接

引入pdf-js

<!-- pdf.js 文件预览-->
<div th:fragment="pdf-js">
	<script th:src="@{/ajax/libs/pdfjs-2.2.228-dist/build/pdf.js}"></script>
</div>

<th:block th:include="include :: pdf-js" />

body

<input id="fileUrl" th:value="*{fileUrl}" hidden/>
<div class="container-fluid">
    <div class="row">
        <canvas id="the-canvas"></canvas>
    </div>
    <div class="row">
        <button id="prev" class="btn btn-success">上一页</button>
        <button id="next" class="btn btn-success">下一页</button>
        <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
    </div>
</div>

** script **

<script>
    $(function() {
        // pdf url, 获取pdf文件的链接，对应的url可以返回文件流
        var url = $("#fileUrl").val();
        console.log(url);

        // 加载核心库
        pdfjsLib.GlobalWorkerOptions.workerSrc = '/ajax/libs/pdfjs-2.2.228-dist/build/pdf.worker.js';

        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 1.5,
            canvas = document.getElementById("the-canvas"),
            ctx = canvas.getContext('2d');

        /**
         * 获取页面信息， 调整canvas 大小， 并且渲染页面
         */
        function renderPage(num) {
            pageRendering = true;
            // 使用promise刷新页面
            pdfDoc.getPage(num).then(function (page) {
                var viewport = page.getViewport({scale: scale});
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // 将pdf页面渲染到canvas上下文
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);

                // 等待渲染完成
                renderTask.promise.then(function(){
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        // 等待新的页面呈现
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });
            // 更新当前页面页码
            document.getElementById('page_num').textContent = num;
        }

        // 如果另一个页面还在渲染，则等待渲染结束。否则立即执行渲染。
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }

        // 显示上一页
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
        document.getElementById("prev").addEventListener('click', onPrevPage);

        // 显示下一页
        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum ++;
            queueRenderPage(pageNum);
        }
        document.getElementById('next').addEventListener('click', onNextPage);

        // 异步加载pdf
        pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;

            // 初始化第一页渲染
            renderPage(pageNum);
        })

    })
</script>