前端pdf预览方案

魏晓东  金牌会员 | 4 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 724|帖子 724|积分 2172

前端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欣赏器可能出现的兼容性问题


  • Safari版本问题 ：某些旧版本的Safari欣赏器可能不支持pdf.js所需的一些JavaScript特性或API，导致无法正常使用。例如，早期版本的Safari不支持私有类字段（这是ES2022引入的特性），而某些版本的pdf.js可能使用了这一特性。
  • 代码实现问题 ：如果pdf.js的代码实现与Safari欣赏器的某些特性存在辩论，也可能导致无法正常使用。例如，pdf.js在Safari中可能无法精确剖析或渲染PDF文件，或者出现空白页面等问题。
二、办理方案


  • 升级Safari欣赏器 ：确保你的Safari欣赏器是最新版本，以便支持pdf.js所需的JavaScript特性和API。
  • 使用兼容版本的pdf.js ：如果你正在使用的pdf.js版本与Safari存在兼容性问题，可以尝试使用旧版本的pdf.js，这些版本可能更兼容Safari欣赏器。例如，有效户陈诉说将pdf-dist库降级为v2.4.456可以办理在Safari中的兼容性问题。
  • 调整代码实现 ：如果你有能力修改pdf.js的代码，可以尝试调整代码实现以兼容Safari欣赏器。例如，避免使用Safari不支持的JavaScript特性或API，或者添加针对Safari的特定处理逻辑。
  • 使用第三方库或工具 ：如果以上方法都无法办理问题，你可以思量使用其他第三方库或工具来在Safari中预览PDF文件。这些库或工具可能已经针对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】

注意：

  • 这是一个很老的插件，可能这个差价的部分依靠插件已经制止维护了；
  • 如果有报错，请复制example运行，然后对照相关文件，以及package.json，缺什么补什么
  • 如果有某些字体显示不了，那可能是pdf.js缺少相关字库剖析，可以尝试更改cMapUrl，建议去官方地址找版本
  • 如果IOS下pdf显示不了，安卓却可以，可能是pdf精度过高导致，Safari欣赏器canvas渲染绘制图片宽高不能超过16777216，超过会不显示
    如果可以用，这个插件使用照旧很方便的，但是如果有问题，照旧换回pdf.js吧
    示例：

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


  • 下载头
  • 直接打开

    • 如果欣赏器不支持剖析 PDF 那么可以触发下载。
    • 如果欣赏器支持剖析 PDF，那么会酿成预览。
    • 这个时候我们可以给 a 标签加上 download 来触发下载。（必要同域）


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

魏晓东

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表