首页 新闻 搜索 专区 学院

求“如何使用js、html5在浏览器直接打开pdf文档”的步骤和例子?

0
悬赏园豆:50 [待解决问题]

在浏览器里直接能打开pdf文件,不依赖于pdf阅读器、adobe flash player等其他工具插件,最好有详细步骤以及小例子。谢谢!!

gnail_oug的主页 gnail_oug | 初学一级 | 园豆:157
提问于:2013-04-08 22:44
< >
分享
所有回答(2)
0

用pdf.js试试吧

gunsmoke | 园豆:3592 (老鸟四级) | 2013-04-09 08:18

pdf.js怎么用,能给个小例子么

支持(0) 反对(0) gnail_oug | 园豆:157 (初学一级) | 2013-04-09 08:42

@gnail_oug: 

直接使用的例子

<html>
<body>
  <div>
    <button id="prev" onclick="goPrevious()">Previous</button>
    <button id="next" onclick="goNext()">Next</button>
    &nbsp; &nbsp;
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
  </div>
  
  <div>
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
  </div>

  <!-- Use latest PDF.js build from Github -->
  <script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
  
  <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 = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';

    //
    // Disable workers to avoid yet another cross-origin issue (workers need the URL of
    // the script to be loaded, and currently do not allow cross-origin scripts)
    //
    PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        scale = 0.8,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    //
    // Get page info from document, resize canvas accordingly, and render page
    //
    function renderPage(num) {
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
      });

      // Update page counters
      document.getElementById('page_num').textContent = pageNum;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
    }

    //
    // Go to previous page
    //
    function goPrevious() {
      if (pageNum <= 1)
        return;
      pageNum--;
      renderPage(pageNum);
    }

    //
    // Go to next page
    //
    function goNext() {
      if (pageNum >= pdfDoc.numPages)
        return;
      pageNum++;
      renderPage(pageNum);
    }

    //
    // Asynchronously download PDF as an ArrayBuffer
    //
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
      pdfDoc = _pdfDoc;
      renderPage(pageNum);
    });
  </script>  
</body>
</html>

 

 

支持(0) 反对(1) gunsmoke | 园豆:3592 (老鸟四级) | 2013-04-10 08:23

@gunsmoke: 请问这个用远程地址的pdf文件就加载不上,你这边行吗?

在Android和PC浏览器中都不行,如果是本地的pdf文件是可以的。但以http开头的不行。

支持(0) 反对(0) 简单--生活 | 园豆:200 (初学一级) | 2013-10-22 09:43

@简单--生活: 代码用 firefox 本地或远程都可以,但用 chrome 都不行。但http://mozilla.github.io/pdf.js/web/viewer.html  两个浏览器都用。

支持(0) 反对(0) shenyinabcd | 园豆:200 (初学一级) | 2015-09-16 16:04
0
chenping2008 | 园豆:9836 (大侠五级) | 2013-04-09 09:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册