ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端pdf预览方案 [打印本页]
作者: 魏晓东    时间: 3 天前
标题: 前端pdf预览方案
前端pdf预览方案

pdf预览一般不必要前端天生pdf文件，pdf文件一般是通过接口，获取pdf文件【responseType:‘blob’,】或二进制文件流【responseType: ‘arraybuffer’,】或者已有的pdf文件。
前端PDF预览通常是通过读取现有的PDF文件，并使用Canvas或SVG等元素在网页上展示PDF内容
前端预览PDF的最好方式照旧让服务器端处理，不但对于前端，也包括后端，这应该是最方便的也是最不易出现问题的方法。
通过接口直接获取Canvas文件流，或svg代码或者文件流。避免了前端做pdf读取利用【前端pdf预览插件大多都很老了，各有隐患，而且pdf读取肯定会慢】；同时也避免了可能出现的差别装备出现的兼容性问题【pc，安卓，ios】。
如果肯定要前端处理pdf预览，下面方案仅供参考：
![

使用 iframe、embed、新窗口打开【看天吃饭，基本不建议】

  1. <embed src="https://demo/path.pdf">
  4. <iframe src="https://demo/path.pdf"></iframe>
复制代码
优点：简单，支持大部分 PC 欣赏器（IE 不支持）。跨域资源同样可以（无需 cors）
缺点：不支持移动端欣赏器，不支持 IE 等低版本欣赏器。样式无法自定义。
pdfjs插件【https://www.npmjs.com/package/pdfjs-dist】

pdfjs插件是最流行的、PDF预览、JavaScript库
PDF.js作为Mozilla开辟的一个JavaScript库，旨在提供一个纯JavaScript实现的PDF文件剖析和渲染办理方案，使用户能在欣赏器环境中无缝地查看PDF文档，而无需依靠任何插件。
PDF.js使用现代Web技能，包括WebGL（用于高级图形渲染）和HTML5
Canvas（用于基本绘图利用），来剖析PDF文件的内容，并将其转换为可在欣赏器中展示的元素。它提供了丰富的API和设置选项，允许开辟者根据需求调整界面样式和功能。此外，PDF.js还支持缩放、旋转、拖动等PDF利用，以及导出为图片和提取文字等功能。
缺点：PDF.js是支持iOS预览的,但可能必要注意一些版本兼容性和实现方式的问题。
pdf.js在ios系统里和Safari欣赏器可能出现的兼容性问题

二、办理方案

pdfjs的使用方式

  1. // pdf有两种使用方式：
  2. 第一种是pdfjs-view（pdfjs-view-es5）分为两个版本/web/viewer-1.html 和 /legacy/web/viewer.html 。legacy 支持低版本浏览器，使用 es5 编写
  3. const res = await downloadPdf({
  4.       date: reportDate.value,
  5.     })
  6.     const resUrl = URL.createObjectURL(res);
  7.     window.open(`./pdf/web/viewer.html?file=${resUrl}`);
  9. 第二种是通过js实现：
  10. <!DOCTYPE html>
  11. <html lang="en">
  13. <head>
  14.   <meta charset="UTF-8">
  15.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.   <title>testDemo</title>
  17.   <script src="./pdf/build/pdf.js"></script>
  18.   <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.7/axios.min.js"></script>
  19.   <style>
  20.     .pdf {
  21.       display: flex;
  22.       align-items: center;
  23.       justify-content: center;
  24.       height: 100vh;
  25.       background-color: #f4f4f9;
  26.       margin: 0;
  27.       padding: 0;
  28.     }
  30.     #preViewPdf {
  31.       width: 100%;
  32.       height: 100vh;
  33.       background: white;
  34.       box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  35.       border-radius: 8px;
  36.       overflow-y: auto;
  37.       position: relative;
  38.     }
  40.     #loading {
  41.       position: absolute;
  42.       color: #555;
  43.       font-size: 1.2em;
  44.       top: 50%;
  45.       left: 50%;
  46.       transform: translate(-50%, -50%);
  47.     }
  49.     .pdf-page {
  50.       display: flex;
  51.       justify-content: center;
  52.       margin-bottom: 10px;
  53.     }
  55.     canvas {
  56.       max-width: 100%;
  57.       height: auto;
  58.     }
  59.   </style>
  60. </head>
  62. <body>
  63.   <div class="pdf">
  64.     <div id="preViewPdf">
  65.       <div id="loading">Loading1114...</div>
  66.     </div>
  67.   </div>
  68. </body>
  69. <script>
  70.   window.onload = async function () {
  71.     const el = document.getElementById('preViewPdf');
  72.     const loadingText = document.getElementById("loading");
  73.     const res = await axios({
  74.       url: '/demo.pdf',
  75.       method: "get",
  76.       // responseType: 'arraybuffer',
  77.       responseType: 'blob',
  78.     })
  79.     const resUrl = URL.createObjectURL(res.data);
  80.     // 加载 pdf 资源
  81.     let loadingTask = pdfjsLib.getDocument(resUrl)
  82.     // PDF 加载完成的回调。
  83.     loadingTask.promise.then(function (pdf) {
  84.       pdf.getPage(1).then(function (page) {
  85.         var viewport = page.getViewport({
  86.           scale: 1,
  87.         });
  88.         // var scale = (500 / viewport.width).toFixed(2)
  89.         // console.log('日志：', scale);
  90.         // viewport = page.getViewport({
  91.         //   scale: scale
  92.         // });
  93.         var canvas = document.createElement('canvas');
  94.         el.appendChild(canvas)
  95.         var context = canvas.getContext('2d');
  96.         canvas.height = viewport.height;
  97.         canvas.width = viewport.width;
  99.         // 创建了一个canvas画板用来存放
  100.         var renderContext = {
  101.           canvasContext: context,
  102.           viewport: viewport
  103.         };
  104.         loadingText.style.display = 'none'
  105.         page.render(renderContext);
  106.       });
  107.     }, function (reason) {
  108.       console.error(reason)
  109.     })
  110.   }
  111. </script>
  113. </html>
复制代码
另一个插件pdfH5【https://www.npmjs.com/package/pdfh5】

注意：
下载 PDF【一个简单的办法，特殊情况可用】


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4