首页
前端开发
HTML5
PDF.js HTML5页面内预览框架

PDF.js HTML5页面内预览框架

0 次浏览 0 条评论
zip
zip

PDF 文档的浏览需求挺常见的，尤其在不想跳转、还想直接在网页上预览的时候，用 PDF.js 就蛮合适。它是 Mozilla 开源的项目，配合 HTML5 的 canvas，能把 PDF 渲染成 2D 图形在页面里直接展示，省事还不丑。

PDF.js 的用法其实不难。你只要去 GitHub 上把 web 目录整个拉下来，里面的 pdf.js、pdf.worker.js 和配套的 viewer.css 基本就是核心了。在 HTML 页面里引入脚本，再放个 来显示内容就搞定一半。

用法上，可以直接通过 PDFJS.getDocument() 传一个 PDF 文件的地址或 Blob 对象加载文档。拿到 pdf.getPage(1) 后，调用 page.render() 就能把第一页画出来了。下面这段是个基本例子：

PDFJS.getDocument('path_to_your_pdf_file.pdf').then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1;
    var viewport = page.getViewport({ scale: scale });
    var canvas = document.getElementById('pdfCanvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

这里记得 pdf.worker.js 要设置好路径，不然控制台会一直报错。渲染完 PDF 后，还可以扩展搜索、缩放、翻页等功能，官方 API 都有文档。

哦对了，如果你要上线，建议配合打包工具比如 Webpack 做些优化，不然直接引入未压缩版，文件体积会有点吓人。License 是 Mozilla Public License 2.0，用着也放心。

如果你想了解更多细节，可以看看这几个扩展链接：

如果你正打算做个文档预览工具，或者想省去第三方 PDF 插件那一套，PDF.js 真的还挺值得一试。

zip 文件大小：2.57MB