viewer2.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .pdfClass {
  8. border: 1px solid black;
  9. }
  10. </style>
  11. <script src="pdf.js"></script>
  12. </head>
  13. <body>
  14. <div class="wrapper" id="pdf-container">
  15. </div>
  16. </body>
  17. <script>
  18. //程序只能在服务器上运行
  19. window.onload = function () {
  20. //创建
  21. function createPdfContainer(id, className) {
  22. var pdfContainer = document.getElementById('pdf-container');
  23. var canvasNew = document.createElement('canvas');
  24. canvasNew.id = id;
  25. canvasNew.className = className;
  26. pdfContainer.appendChild(canvasNew);
  27. };
  28. //渲染pdf
  29. //建议给定pdf宽度
  30. function renderPDF(pdf, i, id) {
  31. pdf.getPage(i).then(function (page) {
  32. var scale = 1.5;
  33. var viewport = page.getViewport(scale);
  34. //
  35. // 准备用于渲染的 canvas 元素
  36. //
  37. var canvas = document.getElementById(id);
  38. var context = canvas.getContext('2d');
  39. canvas.height = viewport.height;
  40. canvas.width = viewport.width;
  41. //
  42. // 将 PDF 页面渲染到 canvas 上下文中
  43. //
  44. var renderContext = {
  45. canvasContext: context,
  46. viewport: viewport
  47. };
  48. page.render(renderContext);
  49. });
  50. };
  51. //创建和pdf页数等同的canvas数
  52. function createSeriesCanvas(num, template) {
  53. var id = '';
  54. for (var j = 1; j <= num; j++) {
  55. id = template + j;
  56. createPdfContainer(id, 'pdfClass');
  57. }
  58. }
  59. //读取pdf文件,并加载到页面中
  60. function loadPDF(fileURL) {
  61. PDFJS.getDocument(fileURL).then(function (pdf) {
  62. //用 promise 获取页面
  63. var id = '';
  64. var idTemplate = 'cw-pdf-';
  65. var pageNum = pdf.numPages;
  66. //根据页码创建画布
  67. createSeriesCanvas(pageNum, idTemplate);
  68. //将pdf渲染到画布上去
  69. for (var i = 1; i <= pageNum; i++) {
  70. id = idTemplate + i;
  71. renderPDF(pdf, i, id);
  72. }
  73. });
  74. }
  75. //如果在本地运行,需要从服务器获取pdf文件
  76. loadPDF('http://www.cityworks.cn/baoan_water/234.pdf');
  77. //如果在服务端运行,需要再不跨域的情况下,获取pdf文件
  78. loadPDF('234.pdf');
  79. };
  80. </script>
  81. </html>