【面试题】1715- 面试官:PDF 预览和下载你是怎么实现的?-轻识

作者：熊的猫

https://juejin.cn/post/7207078219215732794

前言

在开发过程中要求对 PDF 类型的发票提供预览和下载功能， PDF 类型文件的来源又包括 H5 移动端 和 PC 端 ，而针对这两个不同端的处理会有些许不同，下文会有所提及。

针对 PDF 预览 的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何选择，因此，本文的核心就是结合实际需求场景下，看看目前各种实现方案到底哪一个更适合，当然希望大家可以在评论区对文中的内容进行斧正，或是提供更优质的方案。

基本要求：

支持 pdf 文件 内容的 完整预览
多页 pdf 文件 支持 分页查看
PC 端 和 移动端 都需支持下载和预览

产品要求：

PC 端 的预览要支持在 当前页 进行预览
pdf 文件 预览时的字体要和实际文件的 字体保证一致性

PDF 预览

先抛开上面的各种要求，咱们先总结下目前实现 PDF 预览的几种常用方式：

借助各种类库，基于代码实现预览，如基于 pdfjs-dist[1] 的包
直接基于各个浏览器内置的 PDF 预览插件，如、<embed src="xxx" ></code></strong></li> <li> <strong style="color:#000000;">服务端将 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">PDF</code> 文件转换成图片</strong> </li> </ul><p>接下来分别看看以上方案如何实现，以及是否符合上述提供的要求！</p> <h2 style="font-weight:bold;font-size:22px;"> <span style="font-size:20px;color:#ab1942;"><code><embed> / <iframe></code> 实现预览</span> </h2> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;"><code><embed></code> 标签</span> </h3> <p><strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 元素</strong> 将外部内容嵌入文档中的指定位置，此内容由 <strong>外部应用程序</strong> 或 <strong>其他交互式内容源</strong>（如 <strong>浏览器插件</strong>）提供。</p> <p>说简单点，就是使用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 来展示的资源是完全交由它所在的环境提供的展示功能，即如果当前的应用环境支持这个资源的展示那么就可以正常展示，如果不支持那就无法展示。</p> <p>使用起来也是非常简单：</p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"><embed<br /> type=<span style="color:#98c379;">"application/pdf"</span><br /> :src=<span style="color:#98c379;">"pdfUrl"</span><br /> width=<span style="color:#98c379;">"800"</span><br /> height=<span style="color:#98c379;">"600"</span> /><br /><br /></code> </pre> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/0f583e56cd08aad78cb59b0a6cf6666b/5a2b175da48e654197c73c195ad3db21.webp" alt="5a2b175da48e654197c73c195ad3db21.webp" /><blockquote style="font-size:.9em;color:rgb(106,115,125);"> <p style="color:#000000;font-size:15px;">多数现代浏览器已经弃用并取消了对浏览器插件的支持，现在已经不建议使用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 标签，但可以使用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">、<iframe>、<video>、<audio></code> 等标签代替。</p> </blockquote> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;"><code><iframe></code> 标签</span> </h3> <p>基于 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><iframe></code> 的方式和以上差不多，整体效果也一致，这里这就不在额外展示：</p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"><iframe<br /> :src=<span style="color:#98c379;">"pdfUrl"</span><br /> width=<span style="color:#98c379;">"800"</span><br /> height=<span style="color:#98c379;">"600"</span> /><br /><br /></code> </pre> <p>值得注意的是，即便使用的是 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><iframe></code> 但实际展开其内层结构后你会发现：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/3f888ef3847b34c57439a118a5c550c2/4f9a311b7b05870be71cdcb1e2896bd9.webp" alt="4f9a311b7b05870be71cdcb1e2896bd9.webp" /><p> <strong>其内部还是 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 标签？这是怎么回事，不是说最好不建议使用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 吗？</strong> </p> <p>首先来在 <span style="color:#1e6bb8;font-weight:bold;">caniuse</span>[2] 查看兼容情况，如下：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/2abe18b8c00a37ba3cbf2a57c9d11a75/18ebaefbe11c3a4f80d2c3214352a251.webp" alt="18ebaefbe11c3a4f80d2c3214352a251.webp" /><p>我们再找一个不支持 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 的浏览器，比如 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">IE</code>，来试试效果：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/d0889116a809dd12cf5c6b16c0bb45d3/4a268f6fb2ec61dc1b82009a900b13b6.webp" alt="4a268f6fb2ec61dc1b82009a900b13b6.webp" /><p>换成 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><iframe></code> 试试，如下：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/9b8b8dfe29e4c2fc12e705be9a0d839f/e070acd2e4473c255b2e489d03e6a617.webp" alt="e070acd2e4473c255b2e489d03e6a617.webp" /><p>显然，<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 在不兼容的环境直接无法显示，而 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><iframe></code> 是能够正常识别的，只不过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><iframe></code> 加载的资源无法被 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">IE</code> 浏览器处理，即本质原因是 <strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">IE</code></strong> 浏览器根本就不支持对类似 <strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">PDF</code></strong> 等文件的预览，比如当尝试直接在地址栏中输入 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">http://127.0.0.1:3000/src/assets/2.pdf</code> 时会得到：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/5d07958265e817405215be1596efc855/c1e04590112350dff9fc577e183fe6c4.webp" alt="c1e04590112350dff9fc577e183fe6c4.webp" /><p>因此，通常情况下当浏览器不支持内联 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">PDF</code> 时，应该提供一个 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">PDF</code> 的回退链接，即以下载的方式来实现，而这就是 <span style="color:#1e6bb8;font-weight:bold;">pdfobject</span>[3] 做的事情，实际上它的源码内容比较简单，核心就是 <strong>PDFObject 会检测浏览器对内联/嵌入 PDF 的支持，如果支持嵌入，则嵌入 PDF，如果浏览器不支持嵌入，则不会嵌入 PDF，并提供一个指向 PDF 的回退链接</strong>，例如在 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">IE</code> 中的表现：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/fecb8147bc795e02d9d950056d739195/34243b00f2ba05c740a7303bce5d5ebb.webp" alt="34243b00f2ba05c740a7303bce5d5ebb.webp" /><p>事实上，这其实只是帮我们少写了一些兼容性的代码而已，也不一定符合大部分人的场景，在这里提到只是因为其与 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><embed></code> 之间存在的联系。</p> <h2 style="font-weight:bold;font-size:22px;"> <span style="font-size:20px;color:#ab1942;">vue3-pdfjs 实现预览</span> </h2> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">为什么不直接使用 <code>pdfjs-dist</code>?</span> </h3> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/5b91784429e83094fbfe11b7fb1ead3f/4665c6b84e1a5d963cd05c6b32b64d53.webp" alt="4665c6b84e1a5d963cd05c6b32b64d53.webp" /><p><span style="color:#1e6bb8;font-weight:bold;">pdf.js</span>[4] 几个明显的可吐槽的点：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> 包名称不统一，<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">npm</code> 上的包名叫 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdfjs-dist</code>，然而在 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Readme</code> 中自己又称其为 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code></li> <li> 没有清晰的文档作为指引，只能通过其仓库中的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">examples</code> 目录的内容作为参考</li> <li> 官方示例不够友好，例如没有提供 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">vue/react</code> 等相关的示例</li> <li> 直接使用需要引入很多文档没有指明的内容</li> <li> 有时展示的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 内容文字模糊或缺少部分等</li> <li> ...</li> </ul><p>因此，既然已经有基于 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">vue/react</code> 封装好的包，这里就直接用来作为演示。</p> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">具体使用</span> </h3> <p>安装和使用过程可参考 <span style="color:#1e6bb8;font-weight:bold;">vue3-pdfjs</span>[5] ，具体 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Vue3</code> 示例代码如下：</p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"><script setup lang=<span style="color:#98c379;">"ts"</span>><br /><span style="color:#c678dd;">import</span> { onMounted, ref } <span style="color:#c678dd;">from</span> <span style="color:#98c379;">'vue'</span><br /><span style="color:#c678dd;">import</span> { VuePdf, createLoadingTask } <span style="color:#c678dd;">from</span> <span style="color:#98c379;">'vue3-pdfjs/esm'</span><br /><span style="color:#c678dd;">import</span> type { VuePdfPropsType } <span style="color:#c678dd;">from</span> <span style="color:#98c379;">'vue3-pdfjs/components/vue-pdf/vue-pdf-props'</span> <span style="color:#5c6370;font-style:italic;">// Prop type definitions can also be imported</span><br /><span style="color:#c678dd;">import</span> type { PDFDocumentProxy } <span style="color:#c678dd;">from</span> <span style="color:#98c379;">'pdfjs-dist/types/src/display/api'</span><br /><span style="color:#c678dd;">import</span> pdfUrl <span style="color:#c678dd;">from</span> <span style="color:#98c379;">'./assets/You-Dont-Know-JS.pdf'</span><br /><br /><span style="color:#c678dd;">const</span> pdfSrc = ref<VuePdfPropsType[<span style="color:#98c379;">'src'</span>]>(pdfUrl)<br /><span style="color:#c678dd;">const</span> numOfPages = ref(<span style="color:#d19a66;">0</span>)<br /><br />onMounted(<span><span>()</span> =></span> {<br /> <span style="color:#c678dd;">const</span> loadingTask = createLoadingTask(pdfSrc.value)<br /> loadingTask.promise.then(<span>(<span>pdf: PDFDocumentProxy</span>) =></span> {<br /> numOfPages.value = pdf.numPages<br /> })<br />})<br /><<span style="color:#98c379;">/script><br /><br /><template><br /> <VuePdf v-for="page in numOfPages" :key="page" :src="pdfSrc" :page="page" /</span>><br /><<span style="color:#98c379;">/template><br /><br /><style><br />@import '@/</span>assets/base.css<span style="color:#98c379;">';<br /></style><br /><br /></span></code> </pre> <p> <strong>效果如下：</strong> </p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/ef3597baa3e9b3cca07118edc4f0b131/996e77813ed7f43e1aefe3c3c36b8c31.webp" alt="996e77813ed7f43e1aefe3c3c36b8c31.webp" /><h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">存在问题</span> </h3> <p>看上去加载正常的 <strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf 文档</code></strong> 似乎没啥大问题，来试试加载 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf 发票</code> 看看，但由于实际发票敏感信息较多，这里就不贴出原本的发票内容，直接来看预览后的发票内容：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> <p style="color:#000000;">显然整体发票的 <strong>内容缺失得非常多</strong>，虽然某些发票大部分能够展示，但如 <strong>发票抬头</strong> 和 <strong>印章</strong> 部分可能无法正常显示等</p> <p style="color:#000000;"> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/6961613f290631ba0de3b6d67d7ed6e5/083c5897b309148bf7b3bfe4b8c99af2.webp" alt="083c5897b309148bf7b3bfe4b8c99af2.webp" /><img class="rich_pages wxw-img" src="https://filescdn.proginn.com/25a9512214d67202733af59c3373e300/2c3535963b82fa64aea05a878e5c94b9.webp" alt="2c3535963b82fa64aea05a878e5c94b9.webp" /></p> </li> </ul><blockquote style="font-size:.9em;color:rgb(106,115,125);"> <p style="color:#000000;font-size:15px;">【<strong>注意</strong>】无法显示完整的内容是因为 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 是需要一些字体库的支持，如果 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">原 PDF 文件</code> 中部分字体没有匹配到字体库将无法在 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 中显示，而字体库存放在 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">cmaps</code> 文件夹下 <img src="https://filescdn.proginn.com/32e35acd48e41a33e45045ace3a8defa/68860152bedc075765c7c4549841b9cb.webp" alt="68860152bedc075765c7c4549841b9cb.webp" /></p> </blockquote> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> 另外，<strong style="color:#000000;">预览的字体</strong> 和 <strong style="color:#000000;">实际的字体</strong> 是 <strong style="color:#000000;">不一致</strong> 的，而由于发票的特殊性，对字体的一致性是有较大的要求，毕竟如果同一张发票字体不一致会缺乏规范性和合法性（~~<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">被要求字体一致时的说法</code>~~） <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/a8a79c73a2298fed21d84de1195959a0/cd0788d2ab39ec24dbae581f9fc98bc0.webp" alt="cd0788d2ab39ec24dbae581f9fc98bc0.webp" /></li> </ul><blockquote style="font-size:.9em;color:rgb(106,115,125);"> <p style="color:#000000;font-size:15px;">常见的解决方案： <span style="color:#1e6bb8;font-weight:bold;">解决 pdf.js 无法完全显示 pdf 文件内容的问题</span>[6]，实际上还是根据执行环境的错误信息进行分析，需要强行修改源码内容。</p> </blockquote> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">Mozilla Firefox（火狐浏览器）</span> </h3> <p>Mozilla Firefox 内置的 PDF 阅读器实际就是 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code>，你可以直接用火狐浏览器预览一下 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件，如下：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/8db928c13f61d28ef6a386180065aec7/deec17da44164730f2e0b92f15d6d8ff.webp" alt="deec17da44164730f2e0b92f15d6d8ff.webp" /><p>并且大多基于 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 二次封装的库 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">vue-pdf、vue3-pdfjs</code> 等在预览 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件的发票时通常无法显示完整内容，需要或多或少的涉及对源码的更改，而在 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Firefox</code> 中内置的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 却能够完整的显示对应的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件的内容。</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/278f4d051d454ace20a890bd1936a416/6be21dcd9542c318465982089e6dd3d6.webp" alt="6be21dcd9542c318465982089e6dd3d6.webp" /><h2 style="font-weight:bold;font-size:22px;"> <span style="font-size:20px;color:#ab1942;"><code>PDF</code> 转 <code>图片</code> 实现预览</span> </h2> <p>这种方式应该不用多说了，核心是服务端在响应 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件时，先转换成图片类型再返回，前端直接展示具体图片内容即可。</p> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">具体实现</span> </h3> <p>下面通过用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">node</code> 来模拟：</p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"><span style="color:#c678dd;">const</span> pdf = <span style="color:#e6c07b;">require</span>(<span style="color:#98c379;">'pdf-poppler'</span>)<br /><span style="color:#c678dd;">const</span> path = <span style="color:#e6c07b;">require</span>(<span style="color:#98c379;">'path'</span>)<br /><span style="color:#c678dd;">const</span> Koa = <span style="color:#e6c07b;">require</span>(<span style="color:#98c379;">'koa'</span>)<br /><span style="color:#c678dd;">const</span> koaStatic = <span style="color:#e6c07b;">require</span>(<span style="color:#98c379;">'koa-static'</span>)<br /><span style="color:#c678dd;">const</span> cors = <span style="color:#e6c07b;">require</span>(<span style="color:#98c379;">'koa-cors'</span>)<br /><span style="color:#c678dd;">const</span> app = <span style="color:#c678dd;">new</span> Koa()<br /><br /><span style="color:#5c6370;font-style:italic;">// 跨域</span><br />app.use(cors())<br /><br /><span style="color:#5c6370;font-style:italic;">// 静态资源</span><br />app.use(koaStatic(<span style="color:#98c379;">'./server'</span>))<br /><br /><span><span style="color:#c678dd;">function</span> <span style="color:#61aeee;">getFileName</span>(<span>filePath</span>) </span>{<br /> <span style="color:#c678dd;">return</span> filePath<br /> .split(<span style="color:#98c379;">'/'</span>)<br /> .pop()<br /> .replace(<span style="color:#98c379;">/\.[^/.]+$/</span>, <span style="color:#98c379;">''</span>)<br />}<br /><br /><span><span style="color:#c678dd;">function</span> <span style="color:#61aeee;">pdf2png</span>(<span>filePath</span>) </span>{<br /> <span style="color:#5c6370;font-style:italic;">// 获取文件名</span><br /> <span style="color:#c678dd;">const</span> fileName = getFileName(filePath);<br /> <span style="color:#c678dd;">const</span> dir = path.dirname(filePath);<br /><br /> <span style="color:#5c6370;font-style:italic;">// 配置参数</span><br /> <span style="color:#c678dd;">const</span> options = {<br /> <span style="color:#d19a66;">format</span>: <span style="color:#98c379;">'png'</span>,<br /> <span style="color:#d19a66;">out_dir</span>: dir,<br /> <span style="color:#d19a66;">out_prefix</span>: fileName,<br /> <span style="color:#d19a66;">page</span>: <span style="color:#56b6c2;">null</span>,<br /> }<br /><br /> <span style="color:#5c6370;font-style:italic;">// pdf 转换 png</span><br /> <span style="color:#c678dd;">return</span> pdf<br /> .convert(filePath, options)<br /> .then(<span>(<span>res</span>) =></span> {<br /> <span style="color:#e6c07b;">console</span>.log(<span style="color:#98c379;">'Successfully converted ！'</span>)<br /> <span style="color:#c678dd;">return</span> <span style="color:#98c379;">`http://127.0.0.1:4000<span style="color:#e06c75;">${dir.replace(<span style="color:#98c379;">'./server'</span>,<span style="color:#98c379;">''</span>)}</span>/<span style="color:#e06c75;">${fileName}</span>-1.png`</span><br /> })<br /> .catch(<span>(<span>error</span>) =></span> {<br /> <span style="color:#e6c07b;">console</span>.error(error)<br /> })<br />}<br /><br /><span style="color:#5c6370;font-style:italic;">// 响应</span><br />app.use(<span style="color:#c678dd;">async</span> (ctx) => {<br /> <span style="color:#c678dd;">if</span>(ctx.path.endsWith(<span style="color:#98c379;">'/getPdf'</span>)){<br /> <span style="color:#c678dd;">const</span> url = <span style="color:#c678dd;">await</span> pdf2png(<span style="color:#98c379;">'./server/pdf/2.pdf'</span>)<br /> ctx.body = { url }<br /> }<span style="color:#c678dd;">else</span>{<br /> ctx.body = <span style="color:#98c379;">'hello world!'</span><br /> }<br />})<br /><br />app.listen(<span style="color:#d19a66;">4000</span>)<br /><br /></code> </pre> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">避免踩一些坑</span> </h3> <p> <strong>坑一：不推荐 pdf-image</strong> </p> <p>在实现服务端将 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件转换成图片时需要依赖到一些第三方包，一开始使用了 <span style="color:#1e6bb8;font-weight:bold;">pdf-image</span>[7] 这个包，但在实际转换时发生较多的异常错误，顺着错误查看源码后发现其内部需要依赖一些额外的工具，因为其中需要使用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdfinfo xxx</code> 相关命令，并且其对应的 <span style="color:#1e6bb8;font-weight:bold;">issue</span>[8] 上也存在着一些类似问题，但都试了试最后还是没有成功！</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/dd62e7c2419881563740a98431a03af6/ede48f63ee47c4edaa1072a438c172cc.webp" alt="ede48f63ee47c4edaa1072a438c172cc.webp" /><p>因此，更推荐使用 <span style="color:#1e6bb8;font-weight:bold;">pdf-poppler</span>[9] 其中附带了一个 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdftocairo</code> 的程序可以实现 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 到图片的转换能力，不过它目前版本支持 <strong>Windows</strong> 和 <strong>Mac OS</strong>，如下：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/b18641b7ae70726e1f10de93fddc57ab/a44ab5ea274865abbf5ade75f904b1be.webp" alt="a44ab5ea274865abbf5ade75f904b1be.webp" /><p> <strong>坑二：path.basename not a function</strong> </p> <p>在上述的代码内容中需要获取文件的名称，实际上我们可以简单直接的使用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Node Api</code> 中 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">path.basename(path[, suffix])</code> 来达到目的：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/ad4ff2b832725a2280587044b1eb7283/93dcff83899c5fec0ff1608859e773ca.webp" alt="93dcff83899c5fec0ff1608859e773ca.webp" /><p>但是在程序运行时发生了如下 <strong>异常</strong>，对应的代码内容和运行结果如下:</p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"> <span style="color:#5c6370;font-style:italic;">// 配置参数</span><br /> <span style="color:#c678dd;">const</span> options = {<br /> <span style="color:#d19a66;">format</span>: <span style="color:#98c379;">'png'</span>,<br /> <span style="color:#d19a66;">out_dir</span>: dir,<br /> <span style="color:#d19a66;">out_prefix</span>: path.baseName(filePath, path.extname(filePath)), <span style="color:#5c6370;font-style:italic;">// 发生异常</span><br /> <span style="color:#d19a66;">page</span>: <span style="color:#56b6c2;">null</span>,<br /> }<br /><br /></code> </pre> <img src="https://filescdn.proginn.com/2829ad284be6718a18821969b1752b87/3260cdf2069fa46d94cae777c7857617.webp" alt="3260cdf2069fa46d94cae777c7857617.webp" /><p>这个暂时没有找到是什么原因，只能自己简单实现了一个 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">getFileName</code> 方法用于获取文件的名称。</p> <blockquote style="font-size:.9em;color:rgb(106,115,125);"> <p style="color:#000000;font-size:15px;"><strong>报错原因</strong>：太依赖编辑器的自动提示，将 basename 输出成 baseName ，没错就是 n 和 N 的区别.</p> </blockquote> <p> <strong>坑三：细节</strong> </p> <p>上述内容通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">koa</code> 启动模拟业务服务，由于 <strong>业务服务（<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">http://127.0.0.1:4000</code>）</strong> 和 <strong>应用服务 (<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">http://127.0.0.1:3000</code>)</strong> 间的端口不一致，因此会产生 <strong>跨域</strong>，此时可以通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">koa-cors</code> 来解决，值得注意的是有时候的那个业务服务器重启时 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">koa-cors</code> 可能不起作用。</p> <p>由于响应的内容直接在 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">koa</code> 通用中间件中返回，因此，如果你需要支持业务服务提供 <strong>静态资源</strong> 的访问能力，就可以通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">koa-static</code> 来实现，值得注意的是，当你通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">koa-static</code> 指定静态文件资源后，如 **<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">app.use(koaStatic('./static'))</code>**，此时如果你直接通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">http://127.0.0.1:4000/static/pdf/xxx.png</code> 时，那么会得到 <strong>404 Not Found</strong> 的错误，原因在于 <strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">koa-static</code></strong> 是直接把 <strong>/static/</strong> 设置成了 <strong>根路径</strong>，因此正确的访问路径为：<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">http://127.0.0.1:4000/pdf/xxx.png</code> 。</p> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">效果演示</span> </h3> <p>发票内容不方便展示这里就不直接展示了，只需要关注生成的图片和路径即可：</p> <img class="rich_pages wxw-img" src="https://filescdn.proginn.com/7d3688a1849e75910581a18e67c58b65/c2aaf9514674b4e84fba4bfbce459ac9.webp" alt="c2aaf9514674b4e84fba4bfbce459ac9.webp" />PDF 下载 <p>这里的下载实际不仅指 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 的下载，而是客户端方面所能支持的下载方式，最常见的如下几种：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> <strong style="color:#000000;">a 标签</strong>，例如 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><a download="xxx">下载</a></code></li> <li> <strong style="color:#000000;">location.href</strong>，例如 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">window.location.href = xxx</code></li> <li> <strong style="color:#000000;">window.open</strong>，例如 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">window.open(xxx)</code></li> <li> <strong style="color:#000000;">Content-disposition</strong>，例如 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-disposition：attachment；filename="xxx"</code></li> </ul><h2 style="font-weight:bold;font-size:22px;"> <span style="font-size:20px;color:#ab1942;"><code><a></code> 实现下载</span> </h2> <p><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><a></code> 的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">download</code> 属性用于指示浏览器 <strong>下载 href 指定的 URL</strong>，而不是导航到该资源，通常会提示用户将其保存为本地文件，如果 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">download</code> 属性有指定内容，这个值就会在下载保存过程中作为 <strong>预填充的文件名</strong>，主要是因为如下原因：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> 这个值可能会通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">JavaScript</code> 进行动态修改</li> <li> 或者 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-Disposition</code> 中指定的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">download</code> 属性优先级高于 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">a.download</code></li> </ul><p>这种应该是大家最熟悉的方式了，但熟悉归熟悉，还有一些值得注意的点：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">download</code> 属性只适用于 <strong style="color:#000000;">同源 URL</strong><ul style="padding-left:25px;color:#000000;" class="list-paddingleft-1"><li> <strong style="color:#000000;">同源 URL</strong> 会进行 <strong style="color:#000000;">下载</strong> 操作</li> <li> <strong style="color:#000000;">非同源 URL</strong> 会进行 <strong style="color:#000000;">导航</strong> 操作</li> <li> <strong style="color:#000000;">非同源的资源</strong> 仍需要进行下载，那么可以将其转换为 <span style="color:#1e6bb8;font-weight:bold;">blob: URL</span>[10] 和 <span style="color:#1e6bb8;font-weight:bold;">data: URL</span>[11] 形式</li> </ul></li> <li> 若 <strong style="color:#000000;">HTTP</strong> 响应头中的 <span style="color:#1e6bb8;font-weight:bold;">Content-Disposition</span>[12] 属性中指定了一个不同的文件名，那么会优先使用 <strong style="color:#000000;"><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-Disposition</code></strong> 中的内容</li> <li> HTTP 若 <strong style="color:#000000;">HTTP</strong> 响应头中的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-Disposition</code> 被设置为 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-Disposition='inline'</code>，那么在 Firefox 中会优先使用 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-Disposition</code> 的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">download</code> 属性</li> </ul><p> <strong>静态方式:</strong> </p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"> <a href=<span style="color:#98c379;">"http://127.0.0.1:4000/pdf/2-1.png"</span> download=<span style="color:#98c379;">"2.pdf"</span>>下载<<span style="color:#98c379;">/a><br /><br /></span></code> </pre> <p> <strong>动态方式:</strong> </p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"><span><span style="color:#c678dd;">function</span> <span style="color:#61aeee;">download</span>(<span>url, filename</span>)</span>{<br /> <span style="color:#c678dd;">const</span> a = <span style="color:#e6c07b;">document</span>.createElement(<span style="color:#98c379;">"a"</span>); <span style="color:#5c6370;font-style:italic;">// 创建 a 标签</span><br /> a.href = url; <span style="color:#5c6370;font-style:italic;">// 下载路径</span><br /> a.download = filename; <span style="color:#5c6370;font-style:italic;">// 下载属性，文件名</span><br /> a.style.display = <span style="color:#98c379;">"none"</span>; <span style="color:#5c6370;font-style:italic;">// 不可见</span><br /> <span style="color:#e6c07b;">document</span>.body.appendChild(a); <span style="color:#5c6370;font-style:italic;">// 挂载</span><br /> a.click(); <span style="color:#5c6370;font-style:italic;">// 触发点击事件</span><br /> <span style="color:#e6c07b;">document</span>.body.removeChild(a); <span style="color:#5c6370;font-style:italic;">// 移除</span><br />}<br /><br /></code> </pre> <p> <strong>Blob 方式</strong> </p> <pre> <code style="color:#abb2bf;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;font-size:12px;"><span style="color:#c678dd;">if</span> (reqConf.responseType == <span style="color:#98c379;">'blob'</span>) {<br /> <span style="color:#5c6370;font-style:italic;">// 返回文件名</span><br /> <span style="color:#c678dd;">let</span> contentDisposition = config.headers[<span style="color:#98c379;">'content-disposition'</span>];<br /><br /> <span style="color:#c678dd;">if</span> (!contentDisposition) {<br /> contentDisposition = <span style="color:#98c379;">`;filename=<span style="color:#e06c75;">${<span style="color:#e6c07b;">decodeURI</span>(config.headers.filename)}</span>`</span>;<br /> }<br /><br /> <span style="color:#c678dd;">const</span> fileName = <span style="color:#e6c07b;">window</span>.decodeURI(contentDisposition.split(<span style="color:#98c379;">`filename=`</span>)[<span style="color:#d19a66;">1</span>]);<br /><br /> <span style="color:#5c6370;font-style:italic;">// 文件类型</span><br /> <span style="color:#c678dd;">const</span> suffix = fileName.split(<span style="color:#98c379;">'.'</span>)[<span style="color:#d19a66;">1</span>];<br /><br /> <span style="color:#5c6370;font-style:italic;">// 创建 blob 对象</span><br /> <span style="color:#c678dd;">const</span> blob = <span style="color:#c678dd;">new</span> Blob([config.data], {<br /> <span style="color:#d19a66;">type</span>: FileType[suffix],<br /> });<br /><br /> <span style="color:#c678dd;">const</span> link = <span style="color:#e6c07b;">document</span>.createElement(<span style="color:#98c379;">'a'</span>);<br /> link.style.display = <span style="color:#98c379;">'none'</span>;<br /> link.href = URL.createObjectURL(blob); <span style="color:#5c6370;font-style:italic;">// 创建 url 对象</span><br /> link.download = fileName; <span style="color:#5c6370;font-style:italic;">// 下载后文件名</span><br /> <span style="color:#e6c07b;">document</span>.body.appendChild(link);<br /> link.click();<br /><br /> <span style="color:#e6c07b;">document</span>.body.removeChild(link); <span style="color:#5c6370;font-style:italic;">// 移除隐藏的 a 标签 </span><br /> URL.revokeObjectURL(link.href); <span style="color:#5c6370;font-style:italic;">// 销毁 url 对象</span><br /> }<br /><br /></code> </pre> <h2 style="font-weight:bold;font-size:22px;"> <span style="font-size:20px;color:#ab1942;"><code>Content-disposition</code> 和 <code>location.href/window.open</code> 实现下载</span> </h2> <p>这看似是三种下载方式，但实际上就是一种，而且还是以 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-disposition</code> 为准。</p> <p><strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-Disposition</code> 响应头</strong> 指示回复的内容该以何种形式展示，是以 <strong>内联</strong> 的形式（即网页或页面的一部分）展示，还是以 <strong>附件</strong> 的形式 <strong>下载</strong> 并保存到本地，如下：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">inline</code>: 是 <strong style="color:#000000;">默认值</strong>，表示回复中的消息体会以页面的一部分或者整个页面的形式展示<pre><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><span style="color:#d19a66;">Content</span>-<span style="color:#d19a66;">Disposition</span>: inline<br /><br /></code></pre></li> <li> <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">attachment</code>: 设置为此值意味着消息体应该被下载到本地，大多数浏览器会呈现一个 "保存为" 的对话框，并将 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">filename</code> 的值预填为下载后的文件名<pre><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><span style="color:#e06c75;">Content-Disposition</span>: <span style="color:#e06c75;">attachment</span>; <span style="color:#e06c75;">filename</span>="<span style="color:#e06c75;">filename</span><span style="color:#d19a66;">.jpg</span>"<br /><br /></code></pre></li> </ul><p>因此，基于 <strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">location.href='xxx'</code></strong> 和 <strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">window.open(xxx)</code></strong> 的方式能实现下载就是基于 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Content-Disposition: attachment; filename="filename.jpg"</code> 的形式，又或者说是触发了浏览器本身的下载行为，满足了这个条件，无论是通过 <strong><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">a</code> 标签跳转</strong>、<strong>location.href 导航</strong>、<strong>window.open 打开新页面</strong>、<strong>直接在地址栏上输入 URL</strong> 等都可以实现下载。</p> <h2 style="font-weight:bold;font-size:22px;"> <span style="font-size:20px;color:#ab1942;">H5 移动端的下载</span> </h2> <p><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">H5</code> 移动端针对于 <strong>预览</strong> 操作而言基于以上的方式都是可以实现，但是 <strong>下载</strong> 操作可就不同了，因为这是要区分场景：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> 基于 <strong style="color:#000000;">手机浏览器</strong></li> <li> 基于 <strong style="color:#000000;">微信内置浏览器</strong></li> </ul><p>基于 <strong>手机浏览器</strong> 的下载方式和上述提到的内容大致上也是一致的，本质上只要所在的客户端支持下载那就没有问题，然而在 <strong>微信内置浏览器</strong> 中你使用常规的下载方式可能达不到预期：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> 在 <strong style="color:#000000;"><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">Android</code></strong> 中使用常规的下载方式，通常会弹出对话框，询问你是否需要唤醒 <strong style="color:#000000;">手机浏览器</strong> 来实现对应资源的下载，部分机型却不会</li> <li> 在 <strong style="color:#000000;"><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">IOS</code></strong> 中以上方式都 <strong style="color:#000000;">无法实现下载</strong>，因此通常情况下会打开一个新的 <strong style="color:#000000;"><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">webview</code></strong> 来提供预览，部分机型在新的页面中支持 <strong style="color:#000000;">长按屏幕</strong> 的方式进行保存操作，但并不是所有机型都支持</li> </ul><p>本质原因是在 <strong>微信内置浏览器</strong> 中屏蔽任何的 <strong>下载链接</strong>，如 <strong>APP 的下载链接</strong>、<strong>普通文件的下载链接</strong> 等等。</p> <h3 style="font-weight:bold;font-size:20px;"> <span style="font-size:18px;color:#3da742;">H5 移动端的下载还能怎么做？</span> </h3> <p>由于这是 <strong>微信内置浏览器</strong> 环境对下载功能的屏蔽，因此不用再考虑（~~<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">想都不敢想</code>~~）基于 <strong>微信内置浏览器</strong> 来实现下载功能，转而应该考虑的是如何实现 <strong>间接下载</strong>：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> 判断当前是否是属于 <strong style="color:#000000;">微信内置浏览器</strong>，若是则帮助用户自动唤起 <strong style="color:#000000;">手机浏览器</strong> 实现下载，但并不是所有机型都支持 <strong style="color:#000000;">唤起</strong> 操作，因此最好是提示使用用户直接通过 <strong style="color:#000000;">手机浏览器</strong> 实现下载，为了方便用户，可以实现 <strong style="color:#000000;">一键复制</strong> 的功能进行辅助</li> <li> 另一种就直接提示只支持 <strong style="color:#000000;"><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">PC</code> 端下载</strong>，放弃对移动端的下载操作</li> </ul><img src="https://filescdn.proginn.com/f937686746c9bc13d948a01019d16a40/d91ea56b66103c00feeb497556661ec1.webp" alt="d91ea56b66103c00feeb497556661ec1.webp" />BD272F44.gif最后 <p>综上所述，实际在实现 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 预览的过程中可能暂时没有办法达到完美的方式，特别是针对类似 <strong>发票类</strong> 的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件，仍存在如下的问题：</p> <ul style="padding-left:25px;" class="list-paddingleft-1"><li> 无法保证 <strong style="color:#000000;"><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">h5</code></strong> 移动端都具备 <strong style="color:#000000;">下载</strong> 功能</li> <li> 无法保证 <strong style="color:#000000;"><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 预览</strong> 时，预览的字体和实际发票 <strong style="color:#000000;">字体</strong> 保持一致</li> </ul><p>现有大部分的预览方式都基于 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 的方式实现，而 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 内部通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">PDFJs.getDocument(url/buffer)</code> 的方式基于 <strong>文件地址</strong> 或 <strong>数据流</strong> 来获取内容，再通过 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">canvas</code> 处理渲染 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件，感兴趣可以去研究 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 源码。</p> <p><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 带来相关问题就是如果对应的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件中包含了 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf.js</code> 中不存在的字体，那么就无法完整渲染，另外渲染出来的字体和原本的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 文件字体会存在差异。</p> <p>针对这两点，目前发现谷歌内置的 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">pdf</code> 插件似乎提供了很好的支持，意味着其他浏览器如果包含了谷歌相关的插件（如：Edge、QQ Browser），就可以直接基于 <code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);"><iframe></code> 的方式实现预览，又或者为了更严谨字体一致性只能通过下载的方式来查看源文件。</p> <blockquote style="font-size:.9em;color:rgb(106,115,125);"> <p style="color:#000000;font-size:15px;"> <strong>实现不了产品的要求怎么办？</strong> </p> <p style="color:#000000;font-size:15px;">例如上述探讨的方案其实无法满足文章开头提到的部分要求。产品提出需求的目的也是为了提供更好的用户体验（~~<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">正常情况下</code><span style="text-decoration:line-through;">），但是这些要求仍然要落实到技术上，而技术支持程度如何需要我们及时反馈（</span><code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">除非你的产品是技术经验</code>~~），因此作为开发者你需要提供充足的内容向产品证明，然后自己再给出一些间接实现的方案（<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">又或者产品自己就给出新的方案</code>），看是否符合 <strong>第二预期</strong>，核心就是 <strong>合理沟通 + 其他方案</strong>（<code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(233,105,0);">每个人的处境不同，实际情况也许 ... 懂得都懂</code>）。</p> </blockquote> <h3 style="font-weight:bold;font-size:20px;"> <span>参考资料</span> </h3> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[1] </span> </span><p style="font-size:14px;">pdfjs-dist: <em>https://www.npmjs.com/package/pdfjs-dist</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[2] </span> </span><p style="font-size:14px;">caniuse: <em>https://caniuse.com/?search=embe</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[3] </span> </span><p style="font-size:14px;">pdfobject: <em>https://www.npmjs.com/package/pdfobject</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[4] </span> </span><p style="font-size:14px;">https://github.com/mozilla/pdf.js: <em>https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fmozilla%2Fpdf.js</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[5] </span> </span><p style="font-size:14px;">https://www.npmjs.com/package/vue3-pdfjs: <em>https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue3-pdfjs</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[6] </span> </span><p style="font-size:14px;">解决 pdf.js 无法完全显示 pdf 文件内容的问题: <em>https://www.cnblogs.com/KingJames/p/11763590.html</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[7] </span> </span><p style="font-size:14px;">pdf-image: <em>https://www.npmjs.com/search?q=pdf-image</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[8] </span> </span><p style="font-size:14px;">issue: <em>https://github.com/mooz/node-pdf-image/issues?q=pdfinfo</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[9] </span> </span><p style="font-size:14px;">https://www.npmjs.com/package/pdf-poppler: <em>https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fpdf-poppler</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[10] </span> </span><p style="font-size:14px;">blob: URL: <em>https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[11] </span> </span><p style="font-size:14px;">data: URL: <em>https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs</em></p> <span> <span style="font-size:80%;font-family:'ptima-Regular', Optima, 'PingFangSC-light', 'PingFangTC-light', 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[12] </span> </span><p style="font-size:14px;">Content-Disposition: <em>https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition</em></p> <p style="color:rgb(51,51,51);font-size:17px;font-style:normal;font-weight:400;text-align:justify;font-family:'mp-quote', '-apple-system-font', 'system-ui', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;"> <br /></p> <p style="color:rgb(51,51,51);font-size:17px;font-style:normal;font-weight:400;text-align:justify;font-family:'mp-quote', '-apple-system-font', 'system-ui', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;"> <br /></p> </div></div><div class="tag-list-box"><div class="tag-list"><div class="tag-list-container"></div></div></div><span class="view_num">浏览 1</span><div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div></div></div></div><div class="comments_wrapper comments"><div class="title">评论</div><div id="comments" class="comments"><div class="error"></div><div class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="输入评论"></textarea></div><div class="button"><div class="error"><div class="comment-emojis"><div class="comment-choose-img qinglite_upload"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tupianyangshi2"></use></svg><span>图片</span></div><div class="comment-choose-img comment-emoji-btn"><svg class="icon show-emoji-list" aria-hidden="true"><use xlink:href="#icon-biaoqing"></use></svg><span class="show-emoji-list">表情</span><div class="comment-emoji-list"></div></div><div style="display: none" class="comment-choose-img"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shipinwenjian1"></use></svg><span>视频</span></div></div></div><button class="qinglite-comment">评价</button></div><div class="medias qinglite_upload_content"></div></div></div><div style="display: none" class="comments"><div class="title">全部评论</div><div class="comments comment-item-content"></div></div><div id="recommend" class="comments hide_app"><div class="title">推荐 <a href="#qs_detail" class="iconfont icon-huidaodingbu"></a></div></div><div class="qs_post_list flow_post_list hide_app"><div class="item img qinglite_item"><a href="/doc/1768647838c29a729" title="面试官：PDF 预览和下载你是怎么实现的？" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/dbc06d16cb163a89a5bdf17cd877daa3/fab82762ad808fa94645e10cc6aac568.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/1768647838c29a729" title="面试官：PDF 预览和下载你是怎么实现的？" class="title_middle">面试官：PDF 预览和下载你是怎么实现的？</a><a href="https://www.qinglite.cn/u/6996644331d0693ba" title="程序员成长指北" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/462560/cps_wx_0173a365bec2.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">程序员成长指北</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/498464767caa332eb" title="vscode 的 markdown 预览是怎么实现的" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/339ea2aecbe43b88c8ff42708eeddef2/322d1bf40abcdcb5c58a389817f829ed.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/498464767caa332eb" title="vscode 的 markdown 预览是怎么实现的" class="title_middle">vscode 的 markdown 预览是怎么实现的</a><a href="https://www.qinglite.cn/u/1340646f0a7ecde40" title="前端Q" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/523065/cps_wx_017660a4902b.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">前端Q</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/446264676b53bd09d" title="面试官：你是怎么理解缓存的？" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/f29a1ea49c58901f48aceaa632e69999/f175db964a2bc017c21173d58a4423f3.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/446264676b53bd09d" title="面试官：你是怎么理解缓存的？" class="title_middle">面试官：你是怎么理解缓存的？</a><a href="https://www.qinglite.cn/u/8164643e2c7f278fe" title="Java3y" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/346303/cps_wx_0173a3657c64.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Java3y</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/61976476d63f9bee0" title="面试官：你的系统是怎么限流的？" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/8f7ffc6936caa6ea2786486297457bea/0a597601e432347e9f9fdfcc8613853b.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/61976476d63f9bee0" title="面试官：你的系统是怎么限流的？" class="title_middle">面试官：你的系统是怎么限流的？</a><a href="https://www.qinglite.cn/u/16466443cf4f9ff2b" title="小林coding" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/466026/cps_wx_0173a3661353.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">小林coding</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/73456474c04045ded" title="面试官:请问动态代理是怎么实现的?" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/a517c899428eb67ae718b3a14746f44e/bfbc7344872738e6f34f890e220478dc.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/73456474c04045ded" title="面试官:请问动态代理是怎么实现的?" class="title_middle">面试官:请问动态代理是怎么实现的?</a><a href="https://www.qinglite.cn/u/6590646e14e08581f" title="java宝典" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/522176/cps_wx_017660a47821.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">java宝典</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/68706470e9cb21dc7" title="面试官：谈谈你是怎么理解缓存的？" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/b10f9ef3941ea55708508e13c9351862/0932ff96f441d82a443b8e33e2d7782c.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/68706470e9cb21dc7" title="面试官：谈谈你是怎么理解缓存的？" class="title_middle">面试官：谈谈你是怎么理解缓存的？</a><a href="https://www.qinglite.cn/u/1425643e29aecc956" title="漫画编程" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/346302/cps_wx_0173a3657b46.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">漫画编程</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/8123649aa63fc87ea" title="面试官：一千万的数据，你是怎么查询的？" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/6729fc22669946a9335bd47d83ddaa2f/5871dcaa14f5a9c561b18dbfee3b21d3.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/8123649aa63fc87ea" title="面试官：一千万的数据，你是怎么查询的？" class="title_middle">面试官：一千万的数据，你是怎么查询的？</a><a href="https://www.qinglite.cn/u/82436442c14f616af" title="程序员的成长之路" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/457359/cps_wx_0173a365a861.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">程序员的成长之路</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/268764763f50b0343" title="面试官：堆排序是怎么排的？" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/d054ab5cfc6ba8cc0850a542c4c2f6d5/eb45d087d398342fd913fb415fc4438c.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/268764763f50b0343" title="面试官：堆排序是怎么排的？" class="title_middle">面试官：堆排序是怎么排的？</a><a href="https://www.qinglite.cn/u/61176474b99624f48" title="苏三说技术" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/530453/cps_wx_0176e5fea31c.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">苏三说技术</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/71546474fe6fd340c" title="【134期】面试官：你知道 Redis 内部是怎么实现它的字符串的么？" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/25835e43b2081380ce64bdde89d0b7d8/2fb28dbbf97c256b7f85bfd74ae2b922.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/71546474fe6fd340c" title="【134期】面试官：你知道 Redis 内部是怎么实现它的字符串的么？" class="title_middle">【134期】面试官：你知道 Redis 内部是怎么实现它的字符串的么？</a><a href="https://www.qinglite.cn/u/82436442c14f616af" title="程序员的成长之路" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/457359/cps_wx_0173a365a861.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">程序员的成长之路</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/pedia/f0113816651cb31f873c0" title="你是怎么来的" class="content"><div class="bg" style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/web/fa98b81f368854e37f652591817d6a60b05fa223?imageMogr2/format/webp/thumbnail/!600x600r)"></div></a><a href="/pedia/f0113816651cb31f873c0" title="你是怎么来的" class="title_middle">你是怎么来的</a><a href="https://www.qinglite.cn/pedia/f0113816651cb31f873c0" title="你是怎么来的" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/web/fa98b81f368854e37f652591817d6a60b05fa223?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">你是怎么来的</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><i></i><i></i><i></i><i></i><i></i></div><div class="float-bar" id="float-bar"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div><a href="#recommend" class="item iconfont icon-huidaodingbu"></a></div></div></article></div></main><script> let act_type = 1; let act_pro_id="308136"; let act_point = 0; let act_kind = 0; let act_time =180000; let act_page_id=""; </script><footer id="footer"><div class="container"><div class="links"><i class="copyright">2023©轻识</i><a href="https://www.qinglite.cn/doc/8908642f6995bc140">隐私协议</a><a href="https://www.qinglite.cn/doc/8963642f69a51e604">用户协议</a><a href="https://www.qinglite.cn/about">关于我们</a><a class="last" target="_blank" href="https://beian.miit.gov.cn/">浙ICP备19021730号-8</a><a class="last" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002017279">浙公网安备 33011002017279号</a></div></div></footer><link href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/css/layui.css" rel="stylesheet"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/layui.js?v=v202311290135"></script><script> var $ = layui.jquery; </script><script src="https://cdn.qinglite.cn/js/pub.js?v=v202311290135"></script><script src="https://cdn.qinglite.cn/js/news_info.js?v=v202311290135"></script><link rel="stylesheet" href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.css?v=v202311290135"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.js?v=v202311290135"></script></body></html>