[mobile开发碎碎念]手机页面上显示PDF文件

最新推荐文章于 2025-09-07 20:05:35 发布

转载最新推荐文章于 2025-09-07 20:05:35 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nasa/p/3469541.html

文章标签：

#javascript #ViewUI

本文介绍如何使用pdf.js库将PDF文件加载到网页中，并通过JavaScript异步下载PDF文件作为ArrayBuffer，然后获取PDF的第一个页面进行渲染。演示了如何通过URL参数指定PDF文件路径，设置页面缩放比例，以及将PDF页面渲染到HTML canvas元素中。

demo:http://mozilla.github.io/pdf.js/web/viewer.html

项目地址：https://github.com/mozilla/pdf.js

<script type="text/javascript">
    //
    // NOTE:
    // Modifying the URL below to another server will likely *NOT* work. Because of browser
    // security restrictions, we have to use a file server with special headers
    // (CORS) - most servers don't support cross-origin browser requests.
    //
    var url = 'aaa.pdf';

    //
    // Disable workers to avoid yet another cross-origin issue (workers need the URL of
    // the script to be loaded, and dynamically loading a cross-origin script does
    // not work)
    //
    PDFJS.disableWorker = true;

    //
    // Asynchronous download PDF as an ArrayBuffer
    //
    PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
      //
      // Fetch the first page
      //
      pdf.getPage(1).then(function getPageHelloWorld(page) {
        var scale = 1.0;
        var viewport = page.getViewport(($(window).width()-4) / page.getViewport(1.0).width);

        //
        // Prepare canvas using PDF page dimensions
        //
        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        //
        // Render PDF page into canvas context
        //
        page.render({canvasContext: context, viewport: viewport});
      });
    });
  </script>