求“如何使用js、html5在浏览器直接打开pdf文档”的步骤和例子？
0
所有回答(2)
0
用pdf.js试试吧
pdf.js怎么用，能给个小例子么
@gnail_oug:
直接使用的例子
<html> <body> <div> <button id="prev" onclick="goPrevious()">Previous</button> <button id="next" onclick="goNext()">Next</button> <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>
@gunsmoke: 请问这个用远程地址的pdf文件就加载不上，你这边行吗？
在Android和PC浏览器中都不行，如果是本地的pdf文件是可以的。但以http开头的不行。
@简单--生活: 代码用 firefox 本地或远程都可以，但用 chrome 都不行。但http://mozilla.github.io/pdf.js/web/viewer.html 两个浏览器都用。
