前端实现用canvas绘制pdf

最新推荐文章于 2025-07-02 19:05:13 发布

wengqt

最新推荐文章于 2025-07-02 19:05:13 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：智库项目 js 前端开发 React 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/wengqt/article/details/80218669

智库项目同时被 3 个专栏收录

14 篇文章

订阅专栏

前端开发

14 篇文章

订阅专栏

12 篇文章

订阅专栏

本文介绍如何在前端利用canvas和pdf.js库实现PDF预览，以避免使用iframe带来的下载按钮显示问题，从而更好地控制文件下载行为。通过引入pdf.js和pdf.worker.js，可以将PDF内容渲染到canvas上，并指定显示页面，实现自定义的预览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中，有时候会需要文件的预览，由于大部分浏览器都原生支持pdf格式文件的预览，所以只需要使用a标签跳转到pdf路径就可以预览pdf文件了。同样，为了提高兼容性，我们可以引用jquery.media.js文件来加载pdf，当然，前提是你已经引用了jquery。

$('#inner').media({
                   width: '100%',
                   height: '100%',
                   autoplay: true,
                   src:'http://localhost:8080/java.pdf',
                       });

上面这两种方法有一个问题，它显示的给出了下载按钮，这是我们所不希望的，我们希望的是用户在我们的产品里面点击下载按钮来下载文件，这样可以统计下载量和下载时间，要么删除按钮，要么使用其他方法来预览pdf文件。然而，上面两个方法都是采用iframe来加载的pdf，iframe里面的节点是无法操作的，因此是无法删除按钮的。因此我只能采用其他的方法。

在探索的过程中，我发现我可以使用pdf.js来进行开发，将pdf的内容渲染为canvas，同时还可以规定显示的页数。在Demo中，提供了一个pdf.worker.js的封装好的文件，文件中提供了许多展示所需要的方法，在这里，我们同时还需要引入这个文件。到这里，我们便可以使用使用这两个库来进行pdf的预览展示啦。

function showPdf() {
            var container = document.getElementById("container");
            container.style.display = "block";
            var url = 'http://127.0.0.1:8080/java.pdf';
          

            pdfjsLib.workerSrc = 'js/pdf.worker.js';
            pdfjsLib.getDocument(url).then(function getPdfHelloWorld(pdf) {
            	var $pop = $('#pop');
                var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;//设置显示的编码
                var getPageAndRender = function (pageNumber) {
                	 pdf.getPage(pageNumber).then(function getPageHelloWorld(page) {
                         var scale = 1.2;
                         var viewport = page.getViewport(scale);
                         var $canvas = $('<canvas></canvas>').attr({
                             'height': viewport.height,
                             'width': viewport.width,
                         });
                         $pop.append($canvas);
                         
                         page.render({
                             canvasContext: $canvas[0].getContext('2d'),
                             viewport: viewport
                         });
                     });
                	 if (pageNumber < shownPageCount) {
                         pageNumber++;
                         getPageAndRender(pageNumber);
                     }  
                };
                getPageAndRender(1);        		   
            });
            
        }

再来一张效果图：