项目中,有时候会需要文件的预览,由于大部分浏览器都原生支持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); }); }
再来一张效果图: