如何使用js、html5在浏览器直接打开pdf文档
http://q.cnblogs.com/q/48507/
要修改引用的两个js文件, 附件.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
Html代码 <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> |
