PDF 预览和下载你是怎么实现的？
最新推荐文章于 2024-06-18 13:28:22 发布
前端瓶子君
最新推荐文章于 2024-06-18 13:28:22 发布
阅读量224
收藏
点赞数
文章标签：
pdf
html
javascript
servlet
dreamweaver
原文链接：
https://mp.weixin.qq.com/s?__biz=MzUzNjk5MTE1OQ==&mid=2247520573&idx=1&sn=6738201fa4fb29dd685a186bc6523e2e&chksm=faef15e5cd989cf3d46095331d52e5696a7b350bd7f6881247c5d603a37679017c97fedc8f9f&scene=126&sessionid=0
版权
本文探讨了在开发中实现PDF预览和下载的不同方法，包括使用
、<embed>标签，基于pdf.js的实现，以及PDF转图片的方式。针对字体一致性和移动端下载问题，提出了服务端转换为图片的解决方案。同时，指出了在微信内置浏览器中下载的限制和应对策略。 </div> <span>摘要由CSDN通过智能技术生成</span> </div> </div> <article class="baidu_pl"> <div id="article_content" class="article_content clearfix"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css"> <div id="content_views" class="htmledit_views"> <div id="js_content"> <h2>前言</h2> <p>在开发过程中要求对 <strong><code>PDF</code></strong> 类型的发票提供 <strong>预览</strong> 和 <strong>下载</strong> 功能，**<code>PDF</code>** 类型文件的来源又包括 <strong><code>H5 移动端</code></strong> 和 **<code>PC 端</code>**，而针对这两个不同端的处理会有些许不同，下文会有所提及。</p> <p>针对 <strong><code>PDF 预览</code></strong> 的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何选择，因此，本文的核心就是结合实际需求场景下，看看目前各种实现方案到底哪一个更适合，当然希望大家可以在评论区对文中的内容进行斧正，或是提供更优质的方案。</p> <p><strong>基本要求：</strong></p> <ul><li><p>支持 <strong><code>pdf 文件</code></strong> 内容的 <strong>完整预览</strong></p></li><li><p><strong><code>多页 pdf 文件</code></strong> 支持 <strong><code>分页查看</code></strong></p></li><li><p><strong><code>PC 端</code></strong> 和 <strong><code>移动端</code></strong> 都需支持 <strong>下载</strong> 和 <strong>预览</strong></p></li></ul> <p><strong>产品要求：</strong></p> <ul><li><p><strong>PC 端</strong> 的预览要支持在 <strong>当前页</strong> 进行预览</p></li><li><p><strong><code>pdf 文件</code></strong> 预览时的字体要 和 实际文件的 <strong>字体保证一致性</strong></p></li></ul> <img src="https://i-blog.csdnimg.cn/blog_migrate/333178bd8f58508472d63144eb39d089.jpeg" alt="4f08c13346d4f9a320fe674c28c55600.jpeg" /> <figcaption> 9E27229A.gif </figcaption> <h2>PDF 预览</h2> <p>先抛开上面的各种要求，咱们先总结下目前实现 <code>PDF</code> 预览的几种常用方式：</p> <ul><li><p><strong>借助各种类库，基于代码实现预览</strong>，如基于 **`pdfjs-dist`**<sup>[1]</sup> 的包</p></li><li><p><strong>直接基于各个浏览器内置的 <code>PDF</code> 预览插件</strong>，如 <strong><code><iframe src="xxx">、<embed src="xxx" ></code></strong></p></li><li><p><strong>服务端将 <code>PDF</code> 文件转换成图片</strong></p></li></ul> <p>接下来分别看看以上方案如何实现，以及是否符合上述提供的要求！</p> <h3><code><embed> / <iframe></code> 实现预览</h3> <h4><code><embed></code> 标签</h4> <p><strong><code><embed></code> 元素</strong> 将外部内容嵌入文档中的指定位置，此内容由 <strong>外部应用程序</strong> 或 <strong>其他交互式内容源</strong>（如 <strong>浏览器插件</strong>）提供。</p> <p>说简单点，就是使用 <code><embed></code> 来展示的资源是完全交由它所在的环境提供的展示功能，即如果当前的应用环境支持这个资源的展示那么就可以正常展示，如果不支持那就无法展示。</p> <p>使用起来也是非常简单：</p> <pre class="has"><code class="language-go"><embed type="application/pdf" :src="pdfUrl" width="800" height="600" /> 复制代码</code></pre> <img src="https://i-blog.csdnimg.cn/blog_migrate/889b997083f0c8ac2b387eed0fb0c661.png" alt="d39b303ae3cdb81fe924f53fb0b3eb91.jpeg" /> <blockquote> <p>多数现代浏览器已经弃用并取消了对浏览器插件的支持，现在已经不建议使用 <code><embed></code> 标签，但可以使用 <code><img>、<iframe>、<video>、<audio></code> 等标签代替。</p> </blockquote> <h4><code><iframe></code> 标签</h4> <p>基于 <code><iframe></code> 的方式和以上差不多，整体效果也一致，这里这就不在额外展示：</p> <pre class="has"><code class="language-go"><iframe :src="pdfUrl" width="800" height="600" /> 复制代码</code></pre> <p>值得注意的是，即便使用的是 <code><iframe></code> 但实际展开其内层结构后你会发现：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/b749e400db2aa0ba5dad8624e1a89ec0.jpeg" alt="fd3160ef3bc9b7ea1371ce85dfc1cfff.jpeg" /> <p><strong>其内部还是 <code><embed></code> 标签？这是怎么回事，不是说最好不建议使用 <code><embed></code> 吗？</strong></p> <p>首先来在 **`caniuse`**<sup>[2]</sup> 查看兼容情况，如下：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/c301c36491dc73874ab52811c272a78c.jpeg" alt="73bdbc932f71e909cf29ad5dbc15d2bc.jpeg" /> <p>我们再找一个不支持 <code><embed></code> 的浏览器，比如 <code>IE</code>，来试试效果：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/e390ae3b2677e7ca293c772ca066408f.jpeg" alt="75cd084e59addb3929e961e944611751.jpeg" /> <p>换成 <code><iframe></code> 试试，如下：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/4dbfb9216f729d427fda751e64401c5c.jpeg" alt="406b48e1b4a8437b1dd9cb88111ee411.jpeg" /> <p>显然，<code><embed></code> 在不兼容的环境直接无法显示，而 <code><iframe></code> 是能够正常识别的，只不过 <code><iframe></code> 加载的资源无法被 <code>IE</code> 浏览器处理，即本质原因是 <strong><code>IE</code></strong> 浏览器根本就不支持对类似 <strong><code>PDF</code></strong> 等文件的预览，比如当尝试直接在地址栏中输入 <code>http://127.0.0.1:3000/src/assets/2.pdf</code> 时会得到：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/6c4138d463a41e51bd60e4e810427fa5.jpeg" alt="771d06c241cbcb5a890bccc37fb8de82.jpeg" /> <p>因此，通常情况下当浏览器不支持内联 <code>PDF</code> 时，应该提供一个 <code>PDF</code> 的回退链接，即以下载的方式来实现，而这就是 **pdfobject**<sup>[3]</sup> 做的事情，实际上它的源码内容比较简单，核心就是 <strong>PDFObject 会检测浏览器对内联/嵌入 PDF 的支持，如果支持嵌入，则嵌入 PDF，如果浏览器不支持嵌入，则不会嵌入 PDF，并提供一个指向 PDF 的回退链接</strong>，例如在 <code>IE</code> 中的表现：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/954fbe026b7212c28c30d3892a4c86f8.jpeg" alt="9bb471e6be73d3a5bd88da66bc085534.jpeg" /> <p>事实上，这其实只是帮我们少写了一些兼容性的代码而已，也不一定符合大部分人的场景，在这里提到只是因为其与 <code><embed></code> 之间存在的联系。</p> <h3>vue3-pdfjs 实现预览</h3> <h4>为什么不直接使用 <code>pdfjs-dist</code>?</h4> <img src="https://i-blog.csdnimg.cn/blog_migrate/cdaff00874ecaa9f5c9762f50303b956.jpeg" alt="49c4d1f3b0c03a4fce1e09350163bd60.jpeg" /> <p>**pdf.js**<sup>[4]</sup> 几个明显的可吐槽的点：</p> <ul><li><p>包名称不统一，<code>npm</code> 上的包名叫 <code>pdfjs-dist</code>，然而在 <code>Readme</code> 中自己又称其为 <code>pdf.js</code></p></li><li><p>没有清晰的文档作为指引，只能通过其仓库中的 <code>examples</code> 目录的内容作为参考</p></li><li><p>官方示例不够友好，例如没有提供 <code>vue/react</code> 等相关的示例</p></li><li><p>直接使用需要引入很多文档没有指明的内容</p></li><li><p>有时展示的 <code>pdf</code> 内容文字模糊或缺少部分等</p></li><li><p>...</p></li></ul> <p>因此，既然已经有基于 <code>vue/react</code> 封装好的包，这里就直接用来作为演示。</p> <h4>具体使用</h4> <p>安装和使用过程可参考 **`vue3-pdfjs`**<sup>[5]</sup> ，具体 <code>Vue3</code> 示例代码如下：</p> <pre class="has"><code class="language-go"><script setup lang="ts"> import { onMounted, ref } from 'vue' import { VuePdf, createLoadingTask } from 'vue3-pdfjs/esm' import type { VuePdfPropsType } from 'vue3-pdfjs/components/vue-pdf/vue-pdf-props' // Prop type definitions can also be imported import type { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api' import pdfUrl from './assets/You-Dont-Know-JS.pdf' const pdfSrc = ref<VuePdfPropsType['src']>(pdfUrl) const numOfPages = ref(0) onMounted(() => { const loadingTask = createLoadingTask(pdfSrc.value) loadingTask.promise.then((pdf: PDFDocumentProxy) => { numOfPages.value = pdf.numPages }) }) </script> <template> <VuePdf v-for="page in numOfPages" :key="page" :src="pdfSrc" :page="page" /> </template> <style> @import '@/assets/base.css'; </style> 复制代码</code></pre> <p><strong>效果如下：</strong></p> <img src="https://i-blog.csdnimg.cn/blog_migrate/6a5114a47dfc17a516d22e305ad7ce0c.jpeg" alt="e99c0f2d7a8215a001d5c0977d17602d.jpeg" /> <h4>存在问题</h4> <p>看上去加载正常的 <strong><code>pdf 文档</code></strong> 似乎没啥大问题，来试试加载 <code>pdf 发票</code> 看看，但由于实际发票敏感信息较多，这里就不贴出原本的发票内容，直接来看预览后的发票内容：</p> <ul><li><p>显然整体发票的 <strong>内容缺失得非常多</strong>，虽然某些发票大部分能够展示，但如 <strong>发票抬头</strong> 和 <strong>印章</strong> 部分可能无法正常显示等</p><p><img src="https://i-blog.csdnimg.cn/blog_migrate/ea45486fb5185ec0753eaf6e327d1b93.jpeg" alt="ba0ef11ae69c1763fe1fdaf6ca4c2883.jpeg" /><img src="https://i-blog.csdnimg.cn/blog_migrate/b8c7ba2207368f61b87b66e84e24e1bd.jpeg" alt="e6f167aed28110db9211e702503d5045.jpeg" /></p></li></ul> <blockquote> <p>【<strong>注意</strong>】无法显示完整的内容是因为 <code>pdf.js</code> 是需要一些字体库的支持，如果 <code>原 PDF 文件</code> 中部分字体没有匹配到字体库将无法在 <code>pdf.js</code> 中显示，而字体库存放在 <code>cmaps</code> 文件夹下 <img src="https://i-blog.csdnimg.cn/blog_migrate/e0e539798224815f5b81c7901143fb88.jpeg" alt="5a5766e843ff2cd43e98dcac48a07c90.jpeg" /></p> </blockquote> <ul><li><p>另外，<strong>预览的字体</strong> 和 <strong>实际的字体</strong> 是 <strong>不一致</strong> 的，而由于发票的特殊性，对字体的一致性是有较大的要求，毕竟如果同一张发票字体不一致会缺乏 规范性 和 合法性（~~<code>被要求字体一致时的说法</code>~~） <img src="https://i-blog.csdnimg.cn/blog_migrate/17c00377442bf4a3cb494faaf4c52ecb.jpeg" alt="3c8c9596efe2a65e6c2e6278458c5dd8.jpeg" /></p></li></ul> <blockquote> <p>常见的解决方案： **解决 pdf.js 无法完全显示 pdf 文件内容的问题**<sup>[6]</sup>，实际上还是根据执行环境的错误信息进行分析，需要强行修改源码内容。</p> </blockquote> <h4>Mozilla Firefox（火狐浏览器）</h4> <p>Mozilla Firefox 内置的 PDF 阅读器实际就是 <code>pdf.js</code>，你可以直接用火狐浏览器预览一下 <code>pdf</code> 文件，如下：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/57618bd2b61196d860a94092315d18df.jpeg" alt="9478f43c04785d267014be7ac88c9231.jpeg" /> <p>并且大多基于 <code>pdf.js</code> 二次封装的库 <code>vue-pdf、vue3-pdfjs</code> 等在预览 <code>pdf</code> 文件的发票时通常无法显示完整内容，需要或多或少的涉及对源码的更改，而在 <code>Firefox</code> 中内置的 <code>pdf.js</code> 却能够完整的显示对应的 <code>pdf</code> 文件的内容。</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/0808e53251b7617278fd6d372ceeea54.jpeg" alt="be0191e515776d0bf7478b41280b7ae6.jpeg" /> <h3><code>PDF</code> 转 <code>图片</code> 实现预览</h3> <p>这种方式应该不用多说了，核心是服务端在响应 <code>pdf</code> 文件时，先转换成图片类型再返回，前端直接展示具体图片内容即可。</p> <h4>具体实现</h4> <p>下面通过用 <code>node</code> 来模拟：</p> <pre class="has"><code class="language-go">const pdf = require('pdf-poppler') const path = require('path') const Koa = require('koa') const koaStatic = require('koa-static') const cors = require('koa-cors') const app = new Koa() // 跨域 app.use(cors()) // 静态资源 app.use(koaStatic('./server')) function getFileName(filePath) { return filePath .split('/') .pop() .replace(/\.[^/.]+$/, '') } function pdf2png(filePath) { // 获取文件名 const fileName = getFileName(filePath); const dir = path.dirname(filePath); // 配置参数 const options = { format: 'png', out_dir: dir, out_prefix: fileName, page: null, } // pdf 转换 png return pdf .convert(filePath, options) .then((res) => { console.log('Successfully converted ！') return `http://127.0.0.1:4000${dir.replace('./server','')}/${fileName}-1.png` }) .catch((error) => { console.error(error) }) } // 响应 app.use(async (ctx) => { if(ctx.path.endsWith('/getPdf')){ const url = await pdf2png('./server/pdf/2.pdf') ctx.body = { url } }else{ ctx.body = 'hello world!' } }) app.listen(4000) 复制代码</code></pre> <h4>避免踩一些坑</h4> <p><strong>坑一：不推荐 pdf-image</strong></p> <p>在实现服务端将 <code>pdf</code> 文件转换成图片时需要依赖到一些第三方包，一开始使用了 **`pdf-image`**<sup>[7]</sup> 这个包，但在实际转换时发生较多的异常错误，顺着错误查看源码后发现其内部需要依赖一些额外的工具，因为其中需要使用 <code>pdfinfo xxx</code> 相关命令，并且其对应的 `issue`<sup>[8]</sup> 上也存在着一些类似问题，但都试了试最后还是没有成功！</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/dd5ad54f78b15082978f5aa25ab03e67.jpeg" alt="22461fb58bcb75897afae4ddd157872f.jpeg" /> <p>因此，更推荐使用 `pdf-poppler`<sup>[9]</sup> 其中附带了一个 <code>pdftocairo</code> 的程序可以实现 <code>pdf</code> 到 图片 的转换能力，不过它目前版本支持 <strong>Windows</strong> 和 <strong>Mac OS</strong>，如下：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/571a4da12d50c735dd409354516b1c2b.jpeg" alt="0002dedb9feab2fd7b9e4b5e1ceef7ae.jpeg" /> <p><strong>坑二：path.basename not a function</strong></p> <p>在上述的代码内容中需要获取文件的名称，实际上我们可以简单直接的使用 <code>Node Api</code> 中 <code>path.basename(path[, suffix])</code> 来达到目的：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/0a243bd31e071e6ab4e730b9c07b32d7.jpeg" alt="b1f4715f4bfdbf0e663faf9577b4ece6.jpeg" /> <p>但是在程序运行时发生了如下 <strong>异常</strong>，对应的 代码内容 和 运行结果 如下:</p> <pre class="has"><code class="language-go">// 配置参数 const options = { format: 'png', out_dir: dir, out_prefix: path.baseName(filePath, path.extname(filePath)), // 发生异常 page: null, } 复制代码</code></pre> <img src="https://i-blog.csdnimg.cn/blog_migrate/15cca4ae60812d89c0fea17fa60722bd.jpeg" alt="99fc061f61723b178443f850b8fff031.jpeg" /> <p>这个暂时没有找到是什么原因，只能自己简单实现了一个 <code>getFileName</code> 方法用于获取文件的名称。</p> <blockquote> <p><strong>报错原因</strong>：太依赖编辑器的自动提示，将 basename 输出成 baseName ，没错就是 n 和 N 的区别.</p> </blockquote> <p><strong>坑三：细节</strong></p> <p>上述内容通过 <code>koa</code> 启动模拟业务服务，由于 <strong>业务服务（<code>http://127.0.0.1:4000</code>）</strong> 和 <strong>应用服务 (<code>http://127.0.0.1:3000</code>)</strong> 间的端口不一致，因此会产生 <strong>跨域</strong>，此时可以通过 <code>koa-cors</code> 来解决，值得注意的是有时候的那个业务服务器重启时 <code>koa-cors</code> 可能不起作用。</p> <p>由于响应的内容直接在 <code>koa</code> 通用中间件中返回，因此，如果你需要支持业务服务提供 <strong>静态资源</strong> 的访问能力，就可以通过 <code>koa-static</code> 来实现，值得注意的是，当你通过 <code>koa-static</code> 指定静态文件资源后，如 **<code>app.use(koaStatic('./static'))</code>**，此时如果你直接通过 <code>http://127.0.0.1:4000/static/pdf/xxx.png</code> 时，那么会得到 <strong>404 Not Found</strong> 的错误，原因在于 <strong><code>koa-static</code></strong> 是直接把 <strong>/static/</strong> 设置成了 <strong>根路径</strong>，因此正确的访问路径为：<code>http://127.0.0.1:4000/pdf/xxx.png</code> 。</p> <h4>效果演示</h4> <p>发票内容不方便展示这里就不直接展示了，只需要关注生成的图片和路径即可：</p> <img src="https://i-blog.csdnimg.cn/blog_migrate/1bf8152f3b1880feaa142c24cd7eba98.jpeg" alt="fae5b09a367a1b5105b77982bcce327b.jpeg" /> <h2>PDF 下载</h2> <p>这里的下载实际不仅指 <code>pdf</code> 的下载，而是客户端方面所能支持的下载方式，最常见的如下几种：</p> <ul><li><p><strong>a 标签</strong>，例如 <code><a href="xxxx" download="xxx">下载</a></code></p></li><li><p><strong>location.href</strong>，例如 <code>window.location.href = xxx</code></p></li><li><p><strong>window.open</strong>，例如 <code>window.open(xxx)</code></p></li><li><p><strong>Content-disposition</strong>，例如 <code>Content-disposition：attachment；filename="xxx"</code></p></li></ul> <h3><code><a></code> 实现下载</h3> <p><code><a></code> 的 <code>download</code> 属性用于指示浏览器 <strong>下载 href 指定的 URL</strong>，而不是导航到该资源，通常会提示用户将其保存为本地文件，如果 <code>download</code> 属性有指定内容，这个值就会在下载保存过程中作为 <strong>预填充的文件名</strong>，主要是因为如下原因：</p> <ul><li><p>这个值可能会通过 <code>JavaScript</code> 进行动态修改</p></li><li><p>或者 <code>Content-Disposition</code> 中指定的 <code>download</code> 属性优先级高于 <code>a.download</code></p></li></ul> <p>这种应该是大家最熟悉的方式了，但熟悉归熟悉，还有一些值得注意的点：</p> <ul><li><p><code>download</code> 属性只适用于 <strong>同源 URL</strong></p> <ul><li><p><strong>同源 URL</strong> 会进行 <strong>下载</strong> 操作</p></li><li><p><strong>非同源 URL</strong> 会进行 <strong>导航</strong> 操作</p></li><li><p><strong>非同源的资源</strong> 仍需要进行下载，那么可以将其转换为 **`blob: URL`**<sup>[10]</sup> 和 **`data: URL`**<sup>[11]</sup> 形式</p></li></ul></li><li><p>若 <strong>HTTP</strong> 响应头中的 **`Content-Disposition`**<sup>[12]</sup> 属性中指定了一个不同的文件名，那么会优先使用 <strong><code>Content-Disposition</code></strong> 中的内容</p></li><li><p>HTTP 若 <strong>HTTP</strong> 响应头中的 **`Content-Disposition`**<sup>[13]</sup> 被设置为 <code>Content-Disposition='inline'</code>，那么在 Firefox 中会优先使用 <code>Content-Disposition</code> 的 <code>download</code> 属性</p></li></ul> <p><strong>静态方式:</strong></p> <pre class="has"><code class="language-go"><a href="http://127.0.0.1:4000/pdf/2-1.png" download="2.pdf">下载</a> 复制代码</code></pre> <p><strong>动态方式:</strong></p> <pre class="has"><code class="language-go">function download(url, filename){ const a = document.createElement("a"); // 创建 a 标签 a.href = url; // 下载路径 a.download = filename; // 下载属性，文件名 a.style.display = "none"; // 不可见 document.body.appendChild(a); // 挂载 a.click(); // 触发点击事件 document.body.removeChild(a); // 移除 } 复制代码</code></pre> <p><strong>Blob 方式</strong></p> <pre class="has"><code class="language-go">if (reqConf.responseType == 'blob') { // 返回文件名 let contentDisposition = config.headers['content-disposition']; if (!contentDisposition) { contentDisposition = `;filename=${decodeURI(config.headers.filename)}`; } const fileName = window.decodeURI(contentDisposition.split(`filename=`)[1]); // 文件类型 const suffix = fileName.split('.')[1]; // 创建 blob 对象 const blob = new Blob([config.data], { type: FileType[suffix], }); const link = document.createElement('a'); link.style.display = 'none'; link.href = URL.createObjectURL(blob); // 创建 url 对象 link.download = fileName; // 下载后文件名 document.body.appendChild(link); link.click(); document.body.removeChild(link); // 移除隐藏的 a 标签 URL.revokeObjectURL(link.href); // 销毁 url 对象 } 复制代码</code></pre> <h3><code>Content-disposition</code> 和 <code>location.href/window.open</code> 实现下载</h3> <p>这看似是三种下载方式，但实际上就是一种，而且还是以 <code>Content-disposition</code> 为准。</p> <p><strong><code>Content-Disposition</code> 响应头</strong> 指示回复的内容该以何种形式展示，是以 <strong>内联</strong> 的形式（即网页或页面的一部分）展示，还是以 <strong>附件</strong> 的形式 <strong>下载</strong> 并保存到本地，如下：</p> <ul><li><p><code>inline</code>: 是 <strong>默认值</strong>，表示回复中的消息体会以页面的一部分或者整个页面的形式展示</p><pre class="has"><code class="language-go">Content-Disposition: inline 复制代码</code></pre></li><li><p><code>attachment</code>: 设置为此值意味着消息体应该被下载到本地，大多数浏览器会呈现一个 "保存为" 的对话框，并将 <code>filename</code> 的值预填为下载后的文件名</p><pre class="has"><code class="language-go">Content-Disposition: attachment; filename="filename.jpg" 复制代码</code></pre></li></ul> <p>因此，基于 <strong><code>location.href='xxx'</code></strong> 和 <strong><code>window.open(xxx)</code></strong> 的方式能实现下载就是基于 <code>Content-Disposition: attachment; filename="filename.jpg"</code> 的形式，又或者说是触发了浏览器本身的下载行为，满足了这个条件，无论是通过 <strong><code>a</code> 标签跳转</strong>、<strong>location.href 导航</strong>、<strong>window.open 打开新页面</strong>、<strong>直接在地址栏上输入 URL</strong> 等都可以实现下载。</p> <h3>H5 移动端的下载</h3> <p><code>H5</code> 移动端针对于 <strong>预览</strong> 操作而言基于以上的方式都是可以实现，但是 <strong>下载</strong> 操作可就不同了，因为这是要区分场景：</p> <ul><li><p>基于 <strong>手机浏览器</strong></p></li><li><p>基于 <strong>微信内置浏览器</strong></p></li></ul> <p>基于 <strong>手机浏览器</strong> 的下载方式和上述提到的内容大致上也是一致的，本质上只要所在的客户端支持下载那就没有问题，然而在 <strong>微信内置浏览器</strong> 中你使用常规的下载方式可能达不到预期：</p> <ul><li><p>在 <strong><code>Android</code></strong> 中使用常规的下载方式，通常会弹出对话框，询问你是否需要唤醒 <strong>手机浏览器</strong> 来实现对应资源的下载，部分机型却不会</p></li><li><p>在 <strong><code>IOS</code></strong> 中以上方式都 <strong>无法实现下载</strong>，因此通常情况下会打开一个新的 <strong><code>webview</code></strong> 来提供预览，部分机型在新的页面中支持 <strong>长按屏幕</strong> 的方式进行保存操作，但并不是所有机型都支持</p></li></ul> <p>本质原因是在 <strong>微信内置浏览器</strong> 中屏蔽任何的 <strong>下载链接</strong>，如 <strong>APP 的下载链接</strong>、<strong>普通文件 的下载链接</strong> 等等。</p> <h4>H5 移动端的下载还能怎么做？</h4> <p>由于这是 <strong>微信内置浏览器</strong> 环境对下载功能的屏蔽，因此 不用再考虑（~~<code>想都不敢想</code>~~）基于 <strong>微信内置浏览器</strong> 来实现下载功能，转而应该考虑的是如何实现 <strong>间接下载</strong>：</p> <ul><li><p>判断当前是否是属于 <strong>微信内置浏览器</strong>，若是则帮助用户自动唤起 <strong>手机浏览器</strong> 实现下载，但并不是所有机型都支持 <strong>唤起</strong> 操作，因此最好是提示使用用户直接通过 <strong>手机浏览器</strong> 实现下载，为了方便用户，可以实现 <strong>一键复制</strong> 的功能进行辅助</p></li><li><p>另一种就直接提示只支持 <strong><code>PC</code> 端下载</strong>，放弃对移动端的下载操作</p></li></ul> <img src="https://i-blog.csdnimg.cn/blog_migrate/7c9396dbd25206f7b0bed5012ddbc5f1.jpeg" alt="a05708f94894a668a825aa0a887a4804.jpeg" /> <figcaption> BD272F44.gif </figcaption> <h2>最后</h2> <p>综上所述，实际在实现 <code>pdf</code> 预览的过程中可能暂时没有办法达到完美的方式，特别是针对类似 <strong>发票类</strong> 的 <code>pdf</code> 文件，仍存在如下的问题：</p> <ul><li><p>无法保证 <strong><code>h5</code></strong> 移动端都具备 <strong>下载</strong> 功能</p></li><li><p>无法保证 <strong><code>pdf</code> 预览</strong> 时，预览的字体和实际发票 <strong>字体</strong> 保持一致</p></li></ul> <p>现有大部分的预览方式都基于 <code>pdf.js</code> 的方式实现，而 <code>pdf.js</code> 内部通过 <code>PDFJs.getDocument(url/buffer)</code> 的方式基于 <strong>文件地址</strong> 或 <strong>数据流</strong> 来获取内容，再通过 <code>canvas</code> 处理渲染 <code>pdf</code> 文件，感兴趣可以去研究 <code>pdf.js</code> 源码。</p> <p><code>pdf.js</code> 带来相关问题就是如果对应的 <code>pdf</code> 文件中包含了 <code>pdf.js</code> 中不存在的字体，那么就无法完整渲染，另外渲染出来的字体和原本的 <code>pdf</code> 文件字体会存在差异。</p> <p>针对这两点，目前发现谷歌内置的 <code>pdf</code> 插件似乎提供了很好的支持，意味着其他浏览器如果包含了谷歌相关的插件（如：Edge、QQ Browser），就可以直接基于 <code><iframe></code> 的方式实现预览，又或者为了更严谨字体一致性只能通过下载的方式来查看源文件。</p> <blockquote> <p><strong>实现不了产品的要求怎么办？</strong></p> <p>例如上述探讨的方案其实无法满足文章开头提到的部分要求。产品提出需求的目的也是为了提供更好的用户体验（~~<code>正常情况下</code>），但是这些要求仍然要落实到技术上，而技术支持程度如何需要我们及时反馈（<code>除非你的产品是技术经验</code>~~），因此作为开发者你需要提供充足的内容向产品证明，然后自己再给出一些间接实现的方案（<code>又或者产品自己就给出新的方案</code>），看是否符合 <strong>第二预期</strong>，核心就是 <strong>合理沟通 + 其他方案</strong>（<code>每个人的处境不同，实际情况也许 ... 懂得都懂</code>）。</p> </blockquote> <img src="https://i-blog.csdnimg.cn/blog_migrate/baf58d2605ead4819fa2d9522bb79388.jpeg" alt="897bd1071dd68104866e8b223dc6e458.jpeg" /> <figcaption> 9E38506E.jpg </figcaption> <p><strong>以上是个人的一些看法和理解，有不当之处，可以在评论区指正！！！</strong></p> <p><strong>希望本文对你有所帮助！！！</strong></p> <p>关于本文<br /></p> <h2>作者：熊的猫</h2> <p>https://juejin.cn/post/7207078219215732794</p> <h3>最后</h3> <p style="text-align:left;">欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿<br /></p> <p style="text-align:left;">回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！<br /></p> <p style="text-align:left;">回复「交流」，吹吹水、聊聊技术、吐吐槽！</p> <p style="text-align:left;">回复「阅读」，每日刷刷高质量好文！</p> <p style="text-align:left;">如果这篇文章对你有帮助，「在看」是最大的支持</p> <p style="text-align:center;"> 》》面试官也在看的算法资料《《<br /></p> <p style="text-align:right;">“在看和转发”就是最大的支持</p> </div> </div> </div> <div id="treeSkill"></div> </article> <script> $(function() { setTimeout(function () { var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode'); if (mathcodeList.length > 0) { for (let i = 0; i < mathcodeList.length; i++) { if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) { var alt = mathcodeList[i].alt; alt = '\\(' + alt + '\\)'; var curSpan = $('<span class="img-codecogs"></span>'); curSpan.text(alt); $(mathcodeList[i]).before(curSpan); $(mathcodeList[i]).remove(); } } MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } }, 1000) }); </script> </div> <div class="directory-boxshadow-dialog" style="display:none;"> <div class="directory-boxshadow-dialog-box"> </div> <div class="vip-limited-time-offer-box-new" id="vip-limited-time-offer-box-new"> <img class="limited-img limited-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-newWhite.png"> <div class="vip-limited-time-top"> 确定要放弃本次机会？ </div> <span class="vip-limited-time-text">福利倒计时</span> <div class="limited-time-box-new"> <span class="time-hour"></span> <i>:</i> <span class="time-minite"></span> <i>:</i> <span class="time-second"></span> </div> <div class="limited-time-vip-box"> <p> <img class="coupon-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-roup.png"> <span class="def">立减 ¥</span> <span class="active limited-num"></span> </p> <span class="">普通VIP年卡可用</span> </div> <a class="limited-time-btn-new" href="https://mall.csdn.net/vip" data-report-click='{"spm":"1001.2101.3001.9621"}' data-report-query='spm=1001.2101.3001.9621'>立即使用</a> </div> </div> <div class="more-toolbox-new" id="toolBarBox"> <div class="left-toolbox"> <div class="toolbox-left"> <div class="profile-box"> <a class="profile-href" target="_blank" href="https://blog.csdn.net/lunahaijiao"><img class="profile-img" src="https://profile-avatar.csdnimg.cn/83f0e125dfbe4e2fa97c5884381a63da_lunahaijiao.jpg!1"> <span class="profile-name"> 前端瓶子君 </span> </a> </div> <div class="profile-attend"> <a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view='{"mod":"1592215036_002","spm":"1001.2101.3001.4232","extend1":"关注"}'>关注</a> <a class="tool-item-follow active-animation" style="display:none;">关注</a> </div> </div> <div class="toolbox-middle"> <ul class="toolbox-list"> <li class="tool-item tool-item-size tool-active is-like" id="is-like"> <a class="tool-item-href"> <img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt=""> <img class="isactive" style="display:none" id="is-like-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Active.png" alt=""> <img class="isdefault" style="display:block" id="is-like-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Black.png" alt=""> <span id="spanCount" class="count "> 0 </span> </a> <div class="tool-hover-tip"><span class="text space">点赞</span></div> </li> <li class="tool-item tool-item-size tool-active is-unlike" id="is-unlike"> <a class="tool-item-href"> <img class="isactive" style="margin-right:0px;display:none" id="is-unlike-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Active.png" alt=""> <img class="isdefault" style="margin-right:0px;display:block" id="is-unlike-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Black.png" alt=""> <span id="unlikeCount" class="count "></span> </a> <div class="tool-hover-tip"><span class="text space">踩</span></div> </li> <li class="tool-item tool-item-size tool-active is-collection "> <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_824","spm":"1001.2101.3001.4130","ab":"new"}'> <img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive.png" alt=""> <img class="isdefault" id="is-collection-img" style="display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectBlack.png" alt=""> <img class="isactive" id="is-collection-imgactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt=""> <span class="count get-collection " data-num="0" id="get-collection"> 0 </span> </a> <div class="tool-hover-tip collect"> <div class="collect-operate-box"> <span class="collect-text" id="is-collection"> 收藏 </span> </div> </div> <div class="tool-active-list"> <div class="text"> 觉得还不错? <span class="collect-text" id="tool-active-list-collection"> 一键收藏 </span> <img id="tool-active-list-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png" alt=""> </div> </div> </li> <li class="tool-item tool-item-size tool-active tool-item-comment"> <div class="guide-rr-first"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward01.png" alt=""> <button class="btn-guide-known">知道了</button> </div> <a class="tool-item-href" href="#commentBox" data-report-click='{"spm":"1001.2101.3001.7009"}'> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newComment2021Black.png" alt=""> <span class="count"> 0 </span> </a> <div class="tool-hover-tip"><span class="text space">评论</span></div> </li> <li class="tool-item tool-item-bar"> </li> <li class="tool-item tool-item-size tool-active tool-QRcode" data-type="article" id="tool-share"> <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"1582594662_002","spm":"1001.2101.3001.4129","ab":"new"}'> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newShareBlack.png" alt=""> </a> <div class="QRcode" id="tool-QRcode"> <div class="share-bg-icon icon1" id="shareBgIcon"></div> <div class="share-bg-box"> <div class="share-content"> <img class="share-avatar" src="https://profile-avatar.csdnimg.cn/83f0e125dfbe4e2fa97c5884381a63da_lunahaijiao.jpg!1" alt=""> <div class="share-tit"> PDF 预览和下载你是怎么实现的？ </div> <div class="share-dec"> 前言在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能，**PDF** 类型文件的来源又包括 H5 移动端 和 **PC 端**，而针对这两个不同端的处理会有些许不同，下文会有所提及。针对 PDF 预览 的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何选择，因此，本文的核心就是结合实际需求场景下，看看目前各种实现方案到底哪一个更适合，当然希望大家可以在... </div> <a id="copyPosterUrl" class="url" data-report-click='{"spm":"1001.2101.3001.7493"}' data-report-view='{"spm":"1001.2101.3001.7493"}'>复制链接</a> </div> <div class="share-code"> <div class="share-code-box" id='shareCode'></div> <div class="share-code-text">扫一扫</div> </div> </div> <div class="share-code-type"> </div> </div> </li> </ul> </div> <div class="toolbox-right"> </div> </div> </div> <script type=text/javascript crossorigin src="https://csdnimg.cn/release/phoenix/production/qrcode-7c90a92189.min.js"></script> <script src="//g.csdnimg.cn/??sharewx/1.2.1/sharewx.js" type="text/javascript"></script> <script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script> <script type="text/javascript" crossorigin src="https://g.csdnimg.cn/collection-box/2.1.2/collection-box.js"></script> <div class="first-recommend-box recommend-box "> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_37635874/article/details/85536466" data-report-view='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~VECTOR_VIP~PaidSort-1-85536466-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"1","strategy":"2~default~VECTOR_VIP~PaidSort","dest":"https://blog.csdn.net/qq_37635874/article/details/85536466"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/qq_37635874/article/details/85536466" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~VECTOR_VIP~PaidSort-1-85536466-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"1","strategy":"2~default~VECTOR_VIP~PaidSort","dest":"https://blog.csdn.net/qq_37635874/article/details/85536466"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-85536466-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-85536466-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">文件上传<em>下载</em><em>PDF</em><em>预览</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_37635874" target="_blank"><span class="blog-title">qq_37635874的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">01-01</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1208 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/qq_37635874/article/details/85536466" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~VECTOR_VIP~PaidSort-1-85536466-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"1","strategy":"2~default~VECTOR_VIP~PaidSort","dest":"https://blog.csdn.net/qq_37635874/article/details/85536466"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-85536466-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-85536466-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">1. 创建数据库 --创建文件对象表 CREATE TABLE sys_file ( id bigint NOT NULL identity(1,1), name nvarchar(100)，--文件名称 size nvarchar(100)，--文件大小 type int DEFAULT NULL ,-- '文件类型', url varchar(200) DEFAULT ...</div> </a> </div> </div> </div> </div> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_commontools-9d6d0707b4.min.js" type="text/javascript" async></script> <div class="second-recommend-box recommend-box "> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/m0_37732829/article/details/122338575" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~VECTOR_VIP~PaidSort-1-122338575-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"1","strategy":"2~default~VECTOR_VIP~PaidSort","dest":"https://blog.csdn.net/m0_37732829/article/details/122338575"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/m0_37732829/article/details/122338575" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~VECTOR_VIP~PaidSort-1-122338575-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"1","strategy":"2~default~VECTOR_VIP~PaidSort","dest":"https://blog.csdn.net/m0_37732829/article/details/122338575"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-122338575-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-122338575-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">前端<em>实现</em><em>pdf</em>文件<em>下载</em>和<em>预览</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/m0_37732829" target="_blank"><span class="blog-title">m0_37732829的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">01-06</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1065 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/m0_37732829/article/details/122338575" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~VECTOR_VIP~PaidSort-1-122338575-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"1","strategy":"2~default~VECTOR_VIP~PaidSort","dest":"https://blog.csdn.net/m0_37732829/article/details/122338575"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-122338575-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EVECTOR_VIP%7EPaidSort-1-122338575-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1"><!DOCTYPE <em>html</em>> <<em>html</em>> <body> <head> <script> getBlob = (url) => { return new Promise(resolve => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xh.</div> </a> </div> </div> </div> </div> <a id="commentBox" name="commentBox"></a> <div id="pcCommentBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none"> <div class="unlogin-comment-model"> <span class="unlogin-comment-tit">参与评论</span> <span class="unlogin-comment-text">您还未登录，请先</span> <span class="unlogin-comment-bt">登录</span> <span class="unlogin-comment-text">后发表或查看评论</span> </div> </div> <div class="recommend-box insert-baidu-box recommend-box-style "> <div class="recommend-item-box no-index" style="display:none"></div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/ll17770603473/86151527" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-2-86151527-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"2","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/ll17770603473/86151527"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/ll17770603473/86151527" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-2-86151527-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"2","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/ll17770603473/86151527"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-86151527-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-86151527-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>的页面链接A标签.<em>pdf</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">07-14</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/ll17770603473/86151527" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-2-86151527-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"2","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/ll17770603473/86151527"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-86151527-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-86151527-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1"><em>HTML</em>的页面链接A标签.<em>pdf</em></div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/zezejingi/article/details/131121915" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-131121915-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/zezejingi/article/details/131121915"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/zezejingi/article/details/131121915" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-131121915-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/zezejingi/article/details/131121915"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131121915-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131121915-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">a标签<em>下载</em><em>pdf</em>、excel、图片等文件</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/zezejingi" target="_blank"><span class="blog-title">zezejingi的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">06-09</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 2243 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/zezejingi/article/details/131121915" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-131121915-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/zezejingi/article/details/131121915"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131121915-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131121915-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">1、a标签中添加download属性，但是这个方法有时候会失效，这是因为download不支持跨域请求，网站和<em>pdf</em>文件必须在同一域名下才可行，不然就是先打开一个新标签<em>预览</em>。2、在<em>pdf</em>文件<em>下载</em>链接后加response-content-type=application/octet-stream，在浏览器中打开<em>pdf</em>文件链接时，浏览器会默认进行<em>下载</em>。3、动态创建a标签进行<em>下载</em>。</div> </a> </div> </div> </div> <dl id="recommend-item-box-tow" class="recommend-item-box type_blog clearfix"> </dl> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_48138187/article/details/138187081" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-4-138187081-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"4","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/weixin_48138187/article/details/138187081"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/weixin_48138187/article/details/138187081" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-4-138187081-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"4","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/weixin_48138187/article/details/138187081"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-4-138187081-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-4-138187081-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">国产系统中Firefox ESR52.3.0低版本火狐浏览器vue项目打包后兼容问题总结</div> <div class="tag">最新发布</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_48138187" target="_blank"><span class="blog-title">zhangzuying的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">06-18</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1106 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/weixin_48138187/article/details/138187081" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-4-138187081-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"4","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/weixin_48138187/article/details/138187081"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-4-138187081-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-4-138187081-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">随着国产操作系统的兴起，越来越多的企业和单位开始使用这些系统。然而，在这些系统中，浏览器的兼容性往往成为了一个不可忽视的问题。最近我们在给某单位做项目，他们的线上环境基本上全都是基于国产的操作系统。我们在使用Firefox ESR52.3.0这个低版本的火狐浏览器进行vue项目打包后的访问时，遇到了一些兼容性问题。本文将对这些问题进行总结，并分享一些解决方案。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_45108629/article/details/130287552" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-130287552-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_45108629/article/details/130287552"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/qq_45108629/article/details/130287552" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-130287552-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_45108629/article/details/130287552"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-130287552-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-130287552-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">a标签<em>下载</em>文件</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_45108629" target="_blank"><span class="blog-title">qq_45108629的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">04-21</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1581 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/qq_45108629/article/details/130287552" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-130287552-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_45108629/article/details/130287552"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-130287552-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-130287552-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">使用a标签属性download<em>下载</em><em>pdf</em>，txt链接文件，如果是相同域时,可以直接<em>下载</em>。已知通过a标签的download属性，可以直接<em>下载</em>后台接口返回的数据流文件。但是如果域不同,则不是<em>下载</em>，而是直接打开页面<em>预览</em>文件。但是需求是直接点击<em>下载</em>文件,而不是打开<em>预览</em>。所以可以模拟发送http请求,将。来使用a标签download<em>下载</em>。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_41395120/article/details/120698065" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-120698065-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_41395120/article/details/120698065"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/qq_41395120/article/details/120698065" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-120698065-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_41395120/article/details/120698065"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-120698065-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-120698065-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">a标签<em>下载</em><em>pdf</em>文件</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_41395120" target="_blank"><span class="blog-title">qq_41395120的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">10-11</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 4725 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/qq_41395120/article/details/120698065" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-120698065-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"6","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_41395120/article/details/120698065"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-120698065-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-120698065-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">通过a标签的download属性可以<em>实现</em><em>下载</em><em>pdf</em>文件，不过有一个弊端：网站和<em>pdf</em>文件必须在同一域名下才可行，不然就是先打开一个新标签<em>预览</em>，然后点击<em>下载</em>按钮进行<em>下载</em>。 </div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/ganyingxie123456/article/details/138157069" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-138157069-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"7","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/ganyingxie123456/article/details/138157069"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/ganyingxie123456/article/details/138157069" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-138157069-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"7","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/ganyingxie123456/article/details/138157069"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-138157069-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-138157069-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">前端用a标签<em>实现</em>静态资源文件(excel/word/<em>pdf</em>)<em>下载</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/ganyingxie123456" target="_blank"><span class="blog-title">Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~</span></a> </div> <div class="info display-flex"> <span class="info-block time">04-24</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 2786 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/ganyingxie123456/article/details/138157069" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-7-138157069-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"7","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/ganyingxie123456/article/details/138157069"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-138157069-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-138157069-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">介绍了前端如何使用a标签<em>实现</em>静态资源文件(excel/word/<em>pdf</em>)<em>下载</em>。</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/weixin_38500709/12931476" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-12931476-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_38500709/12931476"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/weixin_38500709/12931476" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-12931476-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_38500709/12931476"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-12931476-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-12931476-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">vue<em>实现</em>在线<em>预览</em><em>pdf</em>文件和<em>下载</em>（<em>pdf</em>.js）</div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">10-15</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/weixin_38500709/12931476" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-12931476-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_38500709/12931476"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-12931476-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-12931476-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">最后，通过在Vue CLI 3.0创建的项目中放置<em>pdf</em>.js，并在Vue组件中引用它，可以<em>实现</em>在线<em>预览</em><em>PDF</em>文件和<em>下载</em>的功能。需要注意的是，本文所提到的技术<em>实现</em>是基于Vue.js框架的，对于不熟悉Vue.js的开发者，需要先掌握Vue....</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/baidu_35056427/10554464" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-10554464-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/baidu_35056427/10554464"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/baidu_35056427/10554464" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-10554464-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/baidu_35056427/10554464"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-10554464-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-10554464-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">JS<em>实现</em><em>PDF</em>在线<em>预览</em><em>下载</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">07-20</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/baidu_35056427/10554464" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-10554464-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/baidu_35056427/10554464"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-10554464-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-10554464-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">JS<em>实现</em><em>PDF</em>在线<em>预览</em>和<em>下载</em>功能可以让用户无需离开浏览器就能查看和保存<em>PDF</em>文件，大大提升了用户体验。本文将详细介绍如何利用<em>JavaScript</em>技术来<em>实现</em>这一目标。 首先，我们需要了解一个关键的库——`<em>PDF</em>.js`。`<em>PDF</em>.js`...</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/OceanRay1230/74810596" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-10-74810596-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"10","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/OceanRay1230/74810596"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/OceanRay1230/74810596" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-10-74810596-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"10","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/OceanRay1230/74810596"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-74810596-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-74810596-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">jquery<em>实现</em><em>PDF</em>在线<em>预览</em> jquery<em>实现</em>在线<em>预览</em><em>PDF</em>文档 </div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">01-08</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/OceanRay1230/74810596" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-10-74810596-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"10","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/OceanRay1230/74810596"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-74810596-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-74810596-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">在线<em>预览</em><em>PDF</em>文档，实际上是通过在浏览器中渲染<em>PDF</em>内容来<em>实现</em>的，而不是<em>下载</em>整个文件到本地。这样可以提供更好的用户体验，尤其是在查看大文件或频繁查看不同<em>PDF</em>时。 要使用jQuery<em>实现</em>这一功能，我们需要借助一些...</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/weixin_49203377/88190180" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-11-88190180-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"11","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_49203377/88190180"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/weixin_49203377/88190180" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-11-88190180-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"11","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_49203377/88190180"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-88190180-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-88190180-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">minio分段<em>下载</em> <em>实现</em><em>下载</em> <em>预览</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">08-08</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/weixin_49203377/88190180" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-11-88190180-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"11","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_49203377/88190180"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-88190180-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-11-88190180-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">minio分段<em>下载</em> <em>实现</em><em>下载</em> <em>预览</em></div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_70563937/article/details/130250748" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-12-130250748-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"12","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_70563937/article/details/130250748"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/weixin_70563937/article/details/130250748" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-12-130250748-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"12","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_70563937/article/details/130250748"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-130250748-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-130250748-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">a 标签<em>实现</em><em>pdf</em>，jpg图片<em>预览</em>及文件<em>下载</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_70563937" target="_blank"><span class="blog-title">欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！</span></a> </div> <div class="info display-flex"> <span class="info-block time">04-19</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 2058 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/weixin_70563937/article/details/130250748" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-12-130250748-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"12","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_70563937/article/details/130250748"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-130250748-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-130250748-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">【代码】a 标签<em>实现</em><em>pdf</em>，jpg图片<em>预览</em>及文件<em>下载</em>。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_51055690/article/details/130147940" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-130147940-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_51055690/article/details/130147940"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/qq_51055690/article/details/130147940" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-130147940-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_51055690/article/details/130147940"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-130147940-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-130147940-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">【常用代码】vue中使用a标签<em>下载</em>文件<em>pdf</em>、docx、doc，xls等，赋值文件名</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_51055690" target="_blank"><span class="blog-title">qq_51055690的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">04-14</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 2332 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/qq_51055690/article/details/130147940" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-130147940-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_51055690/article/details/130147940"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-130147940-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-130147940-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">有文件路径，项目域名+文件路径打开，可以直接在浏览器新窗口<em>下载</em>文件，使用window.open打开还会阅读<em>pdf</em>，而不会<em>下载</em><em>pdf</em>文件。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/q649780593/article/details/127652840" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-127652840-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/q649780593/article/details/127652840"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/q649780593/article/details/127652840" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-127652840-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/q649780593/article/details/127652840"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-127652840-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-127652840-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">a标签无法<em>下载</em>.txt.png.jpg.<em>pdf</em>等文件解决方案</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/q649780593" target="_blank"><span class="blog-title"></span></a> </div> <div class="info display-flex"> <span class="info-block time">11-02</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 2786 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/q649780593/article/details/127652840" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-127652840-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/q649780593/article/details/127652840"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-127652840-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-127652840-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">对于直接打开文件的情况，这里附上我自己的解决办法，可以<em>实现</em>让浏览器不打开文件，直接<em>下载</em>。</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/AiGarry/article/details/124289858" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-124289858-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/AiGarry/article/details/124289858"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/AiGarry/article/details/124289858" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-124289858-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/AiGarry/article/details/124289858"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-124289858-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-124289858-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">前端Vue项目中点击a标签<em>实现</em><em>下载</em>文件到本地的功能</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/AiGarry" target="_blank"><span class="blog-title">AiGarry的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">04-20</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1万+ </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/AiGarry/article/details/124289858" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-124289858-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/AiGarry/article/details/124289858"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-124289858-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-124289858-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">1、根据后台提供的接口url<em>下载</em>文件到本地 <a :href="后台给接口提供的文件的url地址">点击<em>下载</em>文件</a> 2、通过a标签的download属性进行<em>下载</em>，<em>下载</em>文件到本地 <a href="文件的地址" download>点击<em>下载</em>文件</a> ①如果是图片或者是<em>pdf</em>文件，会直接在浏览器中打开，word或者是excel文件会<em>下载</em>到本地 ②如果download不给值，会使用默认的文件名 ...</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/SZHFCLXX/article/details/135827650" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-135827650-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/SZHFCLXX/article/details/135827650"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/SZHFCLXX/article/details/135827650" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-135827650-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/SZHFCLXX/article/details/135827650"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-135827650-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-135827650-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">用a标签<em>实现</em><em>下载</em>和弹出新页签<em>预览</em><em>pdf</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/SZHFCLXX" target="_blank"><span class="blog-title">SZHFCLXX的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">01-24</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 901 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/SZHFCLXX/article/details/135827650" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-135827650-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/SZHFCLXX/article/details/135827650"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-135827650-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-135827650-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1"><em>下载</em>中href地址中有api即其实质就是调了个接口；而<em>预览</em>中的href地址是纯远程文件所在路径，不会有api的存在！如果出现点击查看弹出了新页签却不是<em>预览</em>而是继续<em>下载</em>的情况，多半就是复制的时候加了api忘了去掉，导致又去调了<em>下载</em>的接口，而不是去远程找文件展示！</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/u013217071/article/details/80660444" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-80660444-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/u013217071/article/details/80660444"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/u013217071/article/details/80660444" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-80660444-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/u013217071/article/details/80660444"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-80660444-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-80660444-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">json文件<em>下载</em>--防止chrome直接打开方案</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/u013217071" target="_blank"><span class="blog-title">xiaowei的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">06-12</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1万+ </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/u013217071/article/details/80660444" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-80660444-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/u013217071/article/details/80660444"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-80660444-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-80660444-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">一、<em>HTML</em>中的a标签<em>实现</em>点击<em>下载</em> 通常在咱们写项目的时候会遇到上传<em>下载</em>什么的，在上传完文件后会把文件的路径保存到数据库里以便<em>下载</em>，如果想不通过后台直接<em>下载</em>的话，可以把文件路径给a标签的属性href； &amp;lt;a href=&quot;/user/test/xxxx.txt&quot;&amp;gt;点击<em>下载</em>&amp;lt;/a&amp;gt; 这样当用户打开浏览器点击链接的时候就会直接<em>下载</em>文件。 但是有个情况，比如txt,p...</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_46022934/article/details/121411682" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-18-121411682-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"18","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_46022934/article/details/121411682"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/weixin_46022934/article/details/121411682" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-18-121411682-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"18","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_46022934/article/details/121411682"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-121411682-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-121411682-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">前端文件<em>下载</em>的八种方法(解决<em>pdf</em>、图片在浏览器自动打开问题)</div> <div class="tag">热门推荐</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_46022934" target="_blank"><span class="blog-title">weixin_46022934的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">11-18</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 3万+ </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/weixin_46022934/article/details/121411682" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-18-121411682-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"18","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_46022934/article/details/121411682"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-121411682-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-121411682-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">系列文章目录 一、直接使用a标签<em>下载</em>文件(三种方法) 第一种：<em>下载</em>.zip(压缩文件) 第二种：<em>下载</em>.txt(文本文件) 第三种：指定网络地址<em>下载</em>文件 第四种：<em>下载</em><em>pdf</em>文件（浏览器不自动打开） 二、使用<em>JavaScript</em>(四种方法) 第一种：绑定点击事件 第二种：指定location的href地址 第三种：使用form表单的<em>下载</em>文件 第四种：使用saveAs(url)方法（谷歌、火狐等新浏览器不适用，只支持老的IE6、7、8） 三、使用canvas进行图片<em>下载</em>(防止浏览器自动打开图片) 代码片段如下所示</div> </a> </div> </div> </div> <div class="recommend-item-box type_chatgpt clearfix" data-url="https://wenku.csdn.net/answer/88e81cbbe64243368ab5b36b8165e201" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-19-88e81cbbe64243368ab5b36b8165e201-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"19","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/88e81cbbe64243368ab5b36b8165e201"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://wenku.csdn.net/answer/88e81cbbe64243368ab5b36b8165e201" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-19-88e81cbbe64243368ab5b36b8165e201-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"19","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/88e81cbbe64243368ab5b36b8165e201"}' data-report-query='spm=1001.2101.3001.6650.19&utm_medium=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-19-88e81cbbe64243368ab5b36b8165e201-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-19-88e81cbbe64243368ab5b36b8165e201-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="left ellipsis-online ellipsis-online-1">vue<em>实现</em>在线<em>预览</em><em>pdf</em>文件和<em>下载</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">05-05</span> </div> </div> </div> <div class="desc-box"> <a href="https://wenku.csdn.net/answer/88e81cbbe64243368ab5b36b8165e201" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-19-88e81cbbe64243368ab5b36b8165e201-blog-129722447.235^v43^pc_blog_bottom_relevance_base6\",\"dist_request_id\":\"1724390604061_88105\"}","dist_request_id":"1724390604061_88105","ab_strategy":"vector_vip_v1","index":"19","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/88e81cbbe64243368ab5b36b8165e201"}' data-report-query='spm=1001.2101.3001.6650.19&utm_medium=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-19-88e81cbbe64243368ab5b36b8165e201-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-19-88e81cbbe64243368ab5b36b8165e201-blog-129722447.235%5Ev43%5Epc_blog_bottom_relevance_base6'> <div class="desc ellipsis-online ellipsis-online-1">要<em>实现</em>在线<em>预览</em>和<em>下载</em> <em>PDF</em> 文件，可以使用以下两种方式： 1. 使用第三方库 可以使用一些第三方库来<em>实现</em>在线<em>预览</em>和<em>下载</em> <em>PDF</em> 文件，比如 <em>pdf</em>.js。这个库可以在浏览器中渲染 <em>PDF</em> 文件，同时支持<em>下载</em>功能。具体使用方法可以参考该库的官方文档。 2. 使用浏览器自带的 <em>PDF</em> <em>预览</em>功能 大多数现代浏览器都内置了 <em>PDF</em> <em>预览</em>功能，可以直接在浏览器中打开 <em>PDF</em> 文件进行在线<em>预览</em>，也可以右键选择“另存为”进行<em>下载</em>。在 Vue 中，可以通过在模板中使用 iframe 标签来<em>实现</em> <em>PDF</em> 在线<em>预览</em>，代码如下： ```<em>html</em> <template> <div> <iframe :src="<em>pdf</em>Url" frameborder="0"></iframe> <button @click="download<em>Pdf</em>"><em>下载</em> <em>PDF</em></button> </div> </template> <script> export default { data() { return { <em>pdf</em>Url: "http://example.com/example.<em>pdf</em>", // <em>PDF</em> 文件的 URL }; }, methods: { download<em>Pdf</em>() { window.open(this.<em>pdf</em>Url); }, }, }; </script> <style> iframe { width: 100%; height: 100vh; } </style> ``` 需要注意的是，如果 <em>PDF</em> 文件存储在本地的话，需要使用 require 或 import 引入，然后将文件路径作为 iframe 的 src 属性值。</div> </a> </div> </div> </div> </div> <div class="blog-footer-bottom" style="margin-top:10px;"></div> <script src="https://g.csdnimg.cn/common/csdn-footer/csdn-footer.js" data-isfootertrack="false" type="text/javascript"></script> <script type="text/javascript"> window.csdn.csdnFooter.options = { el: '.blog-footer-bottom', type: 2 } </script> </main> <aside class="blog_container_aside"> <div id="asideProfile" class="aside-box"> <div class="profile-intro d-flex"> <div class="avatar-box d-flex justify-content-center flex-column"> <a href="https://blog.csdn.net/lunahaijiao" target="_blank" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4121","dest":"https://blog.csdn.net/lunahaijiao","ab":"new"}'> <img src="https://profile-avatar.csdnimg.cn/83f0e125dfbe4e2fa97c5884381a63da_lunahaijiao.jpg!1" class="avatar_pic"> </a> </div> <div class="user-info d-flex flex-column profile-intro-name-box"> <div class="profile-intro-name-boxTop"> <a href="https://blog.csdn.net/lunahaijiao" target="_blank" class="" id="uid" title="前端瓶子君" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4122","dest":"https://blog.csdn.net/lunahaijiao","ab":"new"}'> <span class="name " username="lunahaijiao">前端瓶子君</span> </a> <span> </span> <span class="flag expert-blog"> <span class="bubble">CSDN认证博客专家</span> </span> <span class="flag company-blog"> <span class="bubble">CSDN认证企业博客</span> </span> </div> <div class="profile-intro-name-boxFooter"> <span class="personal-home-page personal-home-years" title="已加入 CSDN 8年">码龄8年</span> <span class="personal-home-page"> <a class="personal-home-certification" href="https://i.csdn.net/#/uc/profile?utm_source=14998968" target="_blank" title="暂无认证"> <img src="https://csdnimg.cn/identity/nocErtification.png" alt=""> 暂无认证 </a> </span> </div> </div> </div> <div class="data-info d-flex item-tiling"> <dl class="text-center" title="62"> <a href="https://blog.csdn.net/lunahaijiao" data-report-click='{"mod":"1598321000_001","spm":"1001.2101.3001.4310"}' data-report-query="t=1"> <dt><span class="count">62</span></dt> <dd class="font">原创</dd> </a> </dl> <dl class="text-center" data-report-click='{"mod":"1598321000_002","spm":"1001.2101.3001.4311"}' title="126970"> <a href="https://blog.csdn.net/rank/list/weekly" target="_blank"> <dt><span class="count">12万+</span></dt> <dd class="font">周排名</dd> </a> </dl> <dl class="text-center" title="686225"> <a href="https://blog.csdn.net/rank/list/total" data-report-click='{"mod":"1598321000_003","spm":"1001.2101.3001.4312"}' target="_blank"> <dt><span class="count">68万+</span></dt> <dd class="font">总排名</dd> </a> </dl> <dl class="text-center" style="min-width:58px" title="1078287"> <dt><span class="count">107万+</span></dt> <dd>访问</dd> </dl> <dl class="text-center" title="6级,点击查看等级说明"> <dt><a href="https://blog.csdn.net/blogdevteam/article/details/103478461" target="_blank"> <img class="level" src="https://csdnimg.cn/identity/blog6.png"> </a> </dt> <dd>等级</dd> </dl> </div> <div class="item-rank"></div> <div class="data-info d-flex item-tiling"> <dl class="text-center" title="6464"> <dt><span class="count">6464</span></dt> <dd>积分</dd> </dl> <dl class="text-center" id="fanBox" title="802"> <dt><span class="count" id="fan">802</span></dt> <dd>粉丝</dd> </dl> <dl class="text-center" title="1032"> <dt><span class="count">1032</span></dt> <dd>获赞</dd> </dl> <dl class="text-center" title="183"> <dt><span class="count">183</span></dt> <dd>评论</dd> </dl> <dl class="text-center" title="4681"> <dt><span class="count">4681</span></dt> <dd>收藏</dd> </dl> </div> <div class="aside-box-footer" data-report-view='{"spm":"3001.4296"}'> <div class="badge-box d-flex"> <div class="badge d-flex"> <div class="icon-badge" title="五一创作勋章"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/51_create.png" alt="五一创作勋章"> </div> </div> <div class="icon-badge" title="持续创作"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/chizhiyiheng@240.png" alt="持续创作"> </div> </div> <div class="icon-badge" title="创作能手"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/qixiebiaobing4@240.png" alt="创作能手"> </div> </div> <div class="icon-badge" title="原力新人"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/yuanli_xinren@240.png" alt="原力新人"> </div> </div> </div> </div> </div> <div class="profile-intro-name-boxOpration"> <div class="opt-letter-watch-box"> <a rel="nofollow" class="bt-button personal-letter" href="https://im.csdn.net/chat/lunahaijiao" target="_blank" rel="noopener">私信</a> </div> <div class="opt-letter-watch-box"> <a class="personal-watch bt-button" id="btnAttent" >关注</a> </div> </div> </div> <a id="remuneration" data-report-click='{"spm":"1001.2101.3001.9809"}' rel="nofollow" href="" class="remuneration-box"> <img src="" alt=""> </a> <div id="asideWriteGuide" class="aside-box side-write-guide-box type-2" data-report-view='{"spm":"3001.9728"}'> <div class="content-box"> <a rel="nofollow" href="https://mp.csdn.net" target="_blank" class="btn-go-write" data-report-query="spm=3001.9728" data-report-click='{"spm":"3001.9728"}'> <img src="https://img-home.csdnimg.cn/images/20240218021830.png" alt="写文章"> </a> </div> </div> <div id="asideSearchArticle" class="aside-box"> <div class="aside-content search-comter"> <div class="aside-search aside-search-blog"> <input type="text" class="input-serch-blog" name="" autocomplete="off" value="" id="search-blog-words" placeholder="搜博主文章"> <a class="btn-search-blog" data-report-click='{"spm":"1001.2101.3001.9182"}'> <img src="//csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042"> </a> </div> </div> </div> <div id="asideHotArticle" class="aside-box"> <h3 class="aside-title">热门文章</h3> <div class="aside-content"> <ul class="hotArticle-list"> <li> <a href="https://blog.csdn.net/lunahaijiao/article/details/125213754" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/lunahaijiao/article/details/125213754","ab":"new"}'> 前端五个拿来就能用的炫酷动画登录页面 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">41334</span> </a> </li> <li> <a href="https://blog.csdn.net/lunahaijiao/article/details/123625379" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/lunahaijiao/article/details/123625379","ab":"new"}'> 「1.9W字总结」一份通俗易懂的 TS 教程，入门 + 实战！ <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">40079</span> </a> </li> <li> <a href="https://blog.csdn.net/lunahaijiao/article/details/104708055" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/lunahaijiao/article/details/104708055","ab":"new"}'> 58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">23743</span> </a> </li> <li> <a href="https://blog.csdn.net/lunahaijiao/article/details/86741739" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/lunahaijiao/article/details/86741739","ab":"new"}'> 深入diff 算法 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">19542</span> </a> </li> <li> <a href="https://blog.csdn.net/lunahaijiao/article/details/107587777" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/lunahaijiao/article/details/107587777","ab":"new"}'> vite —— 一种新的、更快地 web 开发工具 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">12730</span> </a> </li> </ul> </div> </div> <div id="asideCategory" class="aside-box flexible-box"> <h3 class="aside-title">分类专栏</h3> <div class="aside-content"> <ul> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_6515941.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_6515941.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> iOS技术 </span> </a> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8505678.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8505678.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> react-native </span> </a> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8505052.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8505052.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> react </span> </a> <span class="special-column-num">4篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8526435.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8526435.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> JS </span> </a> <span class="special-column-num">24篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8520015.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8520015.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> webpack </span> </a> <span class="special-column-num">2篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8523441.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8523441.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> nodeJS </span> </a> <span class="special-column-num">1篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8531621.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8531621.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> ES6 </span> </a> <span class="special-column-num">7篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8545476.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8545476.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> 小程序 </span> </a> <span class="special-column-num">7篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8629557.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8629557.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> Taro </span> </a> <span class="special-column-num">5篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8658347.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8658347.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> 数据结构与算法 </span> </a> <span class="special-column-num">3篇</span> </li> </ul> </div> <p class="text-center"> <a class="flexible-btn" data-fbox="aside-archive"><img class="look-more" src="https://csdnimg.cn/release/blogv2/dist/pc/img/arrowDownWhite.png" alt=""></a> </p> </div> <div id="asideNewComments" class="aside-box"> <h3 class="aside-title">最新评论</h3> <div class="aside-content"> <ul class="newcomment-list"> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/lunahaijiao/article/details/121882167#comments_34175165" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/121882167#comments_34175165","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/121882167#comments_34175165","ab":"new"}'>吐血推荐一大波让你直呼哇塞的Canvas库</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/yanbingjx" class="user-name" target="_blank">leaferjs: </a> <span class="code-comments">推荐一个好用的canvas库： LeaferJS，可用于高效绘图、UI 交互（含小游戏）、图形图像编辑，并支持自动布局。</span> </p> </li> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_34163222" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_34163222","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_34163222","ab":"new"}'>「1.9W字总结」一份通俗易懂的 TS 教程，入门 + 实战！</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/qq_46523127" class="user-name" target="_blank">qq_46523127: </a> <span class="code-comments">痒了就拿数据线抽抽</span> </p> </li> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_33808375" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_33808375","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_33808375","ab":"new"}'>「1.9W字总结」一份通俗易懂的 TS 教程，入门 + 实战！</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/qq_53705167" class="user-name" target="_blank">星辰非尘: </a> <span class="code-comments">一篇文章，一看一天，一啃一月。</span> </p> </li> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_33780860" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_33780860","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/123625379#comments_33780860","ab":"new"}'>「1.9W字总结」一份通俗易懂的 TS 教程，入门 + 实战！</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/zrblue" class="user-name" target="_blank">一小池勺: </a> <span class="code-comments">先生大义，受弟子一拜</span> </p> </li> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/lunahaijiao/article/details/134566150#comments_33585671" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/134566150#comments_33585671","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/lunahaijiao/article/details/134566150#comments_33585671","ab":"new"}'>基于截图页面生成前端项目</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/qq_49253465" class="user-name" target="_blank">qq_49253465: </a> <span class="code-comments">运行不起来啊</span> </p> </li> </ul> </div> </div> <div id="asideHotArticle" class="aside-box"> <h3 class="aside-title">大家在看</h3> <div class="aside-content"> <ul class="hotArticle-list"> <li> <a href="https://blog.csdn.net/qq_44421043/article/details/141453566" target="_blank" data-report-click='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/qq_44421043/article/details/141453566","strategy":"202_1052723-1526140_RCMD","ab":"new"}' data-report-view='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/qq_44421043/article/details/141453566","strategy":"202_1052723-1526140_RCMD","ab":"new"}'> 配置PXE预启动执行环境：使用PXE装机服务器网络引导装机 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">1</span> </a> </li> <li> <a href="https://blog.csdn.net/jwwkyjspt/article/details/141381686" target="_blank" data-report-click='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/jwwkyjspt/article/details/141381686","strategy":"202_1052723-1526527_RCMD","ab":"new"}' data-report-view='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/jwwkyjspt/article/details/141381686","strategy":"202_1052723-1526527_RCMD","ab":"new"}'> LEAP模型在能源环境发展、碳排放建模预测及分析中实践应用 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">437</span> </a> </li> <li> <a href="https://blog.csdn.net/2401_85556416/article/details/141431698" target="_blank" data-report-click='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/2401_85556416/article/details/141431698","strategy":"202_1052723-1526642_RCMD","ab":"new"}' data-report-view='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/2401_85556416/article/details/141431698","strategy":"202_1052723-1526642_RCMD","ab":"new"}'> YOLOv10超详细环境搭建以及模型训练（GPU版本） </a> </li> <li> <a href="https://blog.csdn.net/bxcbear/article/details/141453299" target="_blank" data-report-click='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/bxcbear/article/details/141453299","strategy":"202_1052723-1526109_RCMD","ab":"new"}' data-report-view='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/bxcbear/article/details/141453299","strategy":"202_1052723-1526109_RCMD","ab":"new"}'> zabbix用ODBC的方式监控Oracle数据库 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">432</span> </a> </li> <li> <a href="https://blog.csdn.net/whirlwind526/article/details/141319121" target="_blank" data-report-click='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/whirlwind526/article/details/141319121","strategy":"202_1052723-1525315_RCMD","ab":"new"}' data-report-view='{"spm":"1001.2101.3001.10093","dest":"https://blog.csdn.net/whirlwind526/article/details/141319121","strategy":"202_1052723-1525315_RCMD","ab":"new"}'> 计算机Java项目｜基于SpringBoot的大学生智能消费记账系统的设计与实现 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">1845</span> </a> </li> </ul> </div> </div> <div id="asideArchive" class="aside-box" style="display:block!important; width:300px;"> <h3 class="aside-title">最新文章</h3> <div class="aside-content"> <ul class="inf_list clearfix"> <li class="clearfix"> <a href="https://blog.csdn.net/lunahaijiao/article/details/141444736" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/lunahaijiao/article/details/141444736","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/lunahaijiao/article/details/141444736","ab":"new"}'>牛啊牛啊！大佬用Tauri开发一个即时通讯软件</a> </li> <li class="clearfix"> <a href="https://blog.csdn.net/lunahaijiao/article/details/141423710" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/lunahaijiao/article/details/141423710","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/lunahaijiao/article/details/141423710","ab":"new"}'>没有轮子就自己造一个，用 fabric 写一个标尺</a> </li> <li class="clearfix"> <a href="https://blog.csdn.net/lunahaijiao/article/details/141371639" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/lunahaijiao/article/details/141371639","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/lunahaijiao/article/details/141371639","ab":"new"}'>写出好代码的底层逻辑</a> </li> </ul> <div class="archive-bar"></div> <div class="archive-box"> <div class="archive-title">2024</div> <div class="archive-content"> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=08" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=08"}'> <span class="time">08月</span> <span class="count">15篇</span> </a> </div> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=07" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=07"}'> <span class="time">07月</span> <span class="count">21篇</span> </a> </div> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=06" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=06"}'> <span class="time">06月</span> <span class="count">15篇</span> </a> </div> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=05" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=05"}'> <span class="time">05月</span> <span class="count">16篇</span> </a> </div> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=04" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=04"}'> <span class="time">04月</span> <span class="count">17篇</span> </a> </div> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=03" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=03"}'> <span class="time">03月</span> <span class="count">20篇</span> </a> </div> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=02" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=02"}'> <span class="time">02月</span> <span class="count">12篇</span> </a> </div> <div class="archive-item"> <a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=01" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2024&month=01"}'> <span class="time">01月</span> <span class="count">20篇</span> </a> </div> </div> <div class="archive-list-item"><a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2023&month=12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2023&month=12"}'><span class="year">2023年</span><span class="num">204篇</span></a></div> <div class="archive-list-item"><a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2022&month=12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2022&month=12"}'><span class="year">2022年</span><span class="num">252篇</span></a></div> <div class="archive-list-item"><a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2021&month=12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2021&month=12"}'><span class="year">2021年</span><span class="num">590篇</span></a></div> <div class="archive-list-item"><a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2020&month=12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2020&month=12"}'><span class="year">2020年</span><span class="num">329篇</span></a></div> <div class="archive-list-item"><a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2019&month=12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2019&month=12"}'><span class="year">2019年</span><span class="num">45篇</span></a></div> <div class="archive-list-item"><a href="https://blog.csdn.net/lunahaijiao?type=blog&year=2018&month=12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/lunahaijiao?type=blog&year=2018&month=12"}'><span class="year">2018年</span><span class="num">16篇</span></a></div> </div> </div> </div> <!-- 详情页显示目录 --> <!--文章目录--> <div id="asidedirectory" class="aside-box"> <div class='groupfile' id="directory"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> </div> </div> </aside> <script> $("a.flexible-btn").click(function(){ $(this).parents('div.aside-box').removeClass('flexible-box'); $(this).parents("p.text-center").remove(); }) </script> <script type="text/javascript" src="https://g.csdnimg.cn/user-tooltip/2.7/user-tooltip.js"></script> <script type="text/javascript" src="https://g.csdnimg.cn/user-medal/2.0.0/user-medal.js"></script> </div> <div class="recommend-right align-items-stretch clearfix" id="rightAside" data-type="recommend"> <aside class="recommend-right_aside"> <div id="recommend-right" > <div class='flex-column aside-box groupfile' id="groupfile"> <div class="groupfile-div"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> </div> </div> <div class='aside-box kind_person d-flex flex-column'> <h3 class="aside-title">分类专栏</h3> <div class="align-items-stretch kindof_item" id="kind_person_column"> <div class="aside-content"> <ul> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_6515941.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_6515941.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> iOS技术 </span> </a> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8505678.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8505678.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> react-native </span> </a> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8505052.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8505052.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> react </span> </a> <span class="special-column-num">4篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8526435.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8526435.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> JS </span> </a> <span class="special-column-num">24篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8520015.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8520015.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> webpack </span> </a> <span class="special-column-num">2篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8523441.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8523441.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> nodeJS </span> </a> <span class="special-column-num">1篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8531621.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8531621.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> ES6 </span> </a> <span class="special-column-num">7篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8545476.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8545476.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> 小程序 </span> </a> <span class="special-column-num">7篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8629557.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8629557.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> Taro </span> </a> <span class="special-column-num">5篇</span> </li> <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/lunahaijiao/category_8658347.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/lunahaijiao/category_8658347.html","ab":"new"}'> <div class="special-column-bar "></div> <img src="https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> 数据结构与算法 </span> </a> <span class="special-column-num">3篇</span> </li> </ul> </div> </div> </div> </div> </aside> </div> <div class="recommend-right1 align-items-stretch clearfix" id="rightAsideConcision" data-type="recommend"> <aside class="recommend-right_aside"> <div id="recommend-right-concision" > <div class='flex-column aside-box groupfile' id="groupfileConcision"> <div class="groupfile-div1"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> </div> </div> </div> </aside> </div> </div> <div class="mask-dark"></div> <script type="text/javascript"> var timert = setInterval(function() { sideToolbar = $(".csdn-side-toolbar"); if (sideToolbar.length > 0) { sideToolbar.css('cssText', 'bottom:64px !important;') clearInterval(timert); } }, 200); </script> <div class="skin-boxshadow"></div> <div class="directory-boxshadow"></div> <div class="comment-side-box-shadow comment-side-tit-close" id="commentSideBoxshadow"> <div class="comment-side-content"> <div class="comment-side-tit"> <span class="comment-side-tit-count">评论</span> <img class="comment-side-tit-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></div> <div id="pcCommentSideBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none"> </div> <div id="pcFlodCommentSideBox" class="pc-flodcomment-sidebox"> <div class="comment-fold-tit"><span id="lookUnFlodComment" class="back"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowLeftWhite.png" alt=""></span>被折叠的 <span class="count"></span> 条评论 <a href="https://blogdev.blog.csdn.net/article/details/122245662" class="tip" target="_blank">为什么被折叠?</a> <a href="https://bbs.csdn.net/forums/FreeZone" class="park" target="_blank"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/iconPark.png">到【灌水乐园】发言</a> </div> <div class="comment-fold-content"></div> <div id="lookBadComment" class="look-bad-comment side-look-comment"> <a class="look-more-comment">查看更多评论<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowDownWhite.png" alt=""></a> </div> </div> </div> <div class="comment-rewarddialog-box"> <div class="form-box"> <div class="title-box"> 添加红包 <a class="btn-form-close"></a> </div> <form id="commentRewardForm"> <div class="ipt-box"> <label for="txtName">祝福语</label> <div class="ipt-btn-box"> <input type="text" name="name" id="txtName" autocomplete="off" maxlength="50"> <a class="btn-ipt btn-random"></a> </div> <p class="notice">请填写红包祝福语或标题</p> </div> <div class="ipt-box"> <label for="txtSendAmount">红包数量</label> <div class="ipt-txt-box"> <input type="text" name="sendAmount" maxlength="4" id="txtSendAmount" placeholder="请填写红包数量(最小10个)" autocomplete="off"> <span class="after-txt">个</span> </div> <p class="notice">红包个数最小为10个</p> </div> <div class="ipt-box"> <label for="txtMoney">红包总金额</label> <div class="ipt-txt-box error"> <input type="text" name="money" maxlength="5" id="txtMoney" placeholder="请填写总金额(最低5元)" autocomplete="off"> <span class="after-txt">元</span> </div> <p class="notice">红包金额最低5元</p> </div> <div class="balance-info-box"> <label>余额支付</label> <div class="balance-info"> 当前余额<span class="balance">3.43</span>元 <a href="https://i.csdn.net/#/wallet/balance/recharge" class="link-charge" target="_blank">前往充值 ></a> </div> </div> <div class="opt-box"> <div class="pay-info"> 需支付：<span class="price">10.00</span>元 </div> <button type="button" class="ml-auto btn-cancel">取消</button> <button type="button" class="ml8 btn-submit" disabled="true">确定</button> </div> </form> </div> </div> <div class="rr-guide-box"> <div class="rr-first-box"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward02.png" alt=""> <button class="btn-guide-known next">下一步</button> </div> <div class="rr-second-box"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward03.png" alt=""> <button class="btn-guide-known known">知道了</button> </div> </div> </div> <div class="redEnvolope" id="redEnvolope"> <div class="env-box"> <div class="env-container"> <div class="pre-open" id="preOpen"> <div class="top"> <header> <img class="clearTpaErr" :src="redpacketAuthor.avatar" alt="" /> <div class="author">成就一亿技术人!</div> </header> <div class="bot-icon"></div> </div> <footer> <div class="red-openbtn open-start"></div> <div class="tip"> 领取后你会自动成为博主和红包主的粉丝 <a class="rule" target="_blank">规则</a> </div> </footer> </div> <div class="opened" id="opened"> <div class="bot-icon"> <header> <a class="creatorUrl" href="" target="_blank"> <img class="clearTpaErr" src="https://profile-avatar.csdnimg.cn/default.jpg!2" alt="" /> </a> <div class="author"> <div class="tt">hope_wisdom</div> 发出的红包 </div> </header> </div> <div class="receive-box"> <header></header> <div class="receive-list"> </div> </div> </div> </div> <div class="close-btn"></div> </div> </div> <div class="pay-code"> <div class="pay-money">实付<span class="pay-money-span" data-nowprice='' data-oldprice=''>元</span></div> <div class="content-blance"><a class="blance-bt" href="javascript:;">使用余额支付</a></div> <div class="content-code"> <div id="payCode" data-id=""> <div class="renovate"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png"> <span>点击重新获取</span> </div> </div> <div class="pay-style"><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span><span class="text">扫码支付</span></div> </div> <div class="bt-close"> <svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"> <defs> <style type="text/css"></style> </defs> <path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path> </svg> </div> <div class="pay-balance"> <input type="radio" class="pay-code-radio" data-type="details"> <span class="span">钱包余额</span> <span class="balance" style="color:#FC5531;font-size:14px;">0</span> <div class="pay-code-tile"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt=""> <div class="pay-code-content"> <div class="span"> <p class="title">抵扣说明：</p> <p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。</p> </div> </div> </div> </div> <a class="pay-balance-con" href="https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span>余额充值</span></a> </div> <div style="display:none;"> <img src="" onerror='setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74"}},3000);'> </div> <div class="keyword-dec-box" id="keywordDecBox"></div> </body> <!-- 富文本柱状图 --> <link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/chart.css" /> <script type="text/javascript" src="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/lib/chart.min.js"></script> <script type="text/javascript" src="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/widget2chart.js"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/axios-83fa28cedf.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_highlight-8defd55d6e.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_common-be82269d23.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/edit_copy_code-354ae1b335.min.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/lib/cboxEditor/1.1.6/embed-editor.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://g.csdnimg.cn/lib/cboxEditor/1.1.6/embed-editor.min.css"> <link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/atom-one-light.css"> <script src="https://g.csdnimg.cn/user-accusation/1.0.6/user-accusation.js" type="text/javascript"></script> <script> // 全局声明 if (window.csdn === undefined) { window.csdn = {}; } window.csdn.sideToolbar = { options: { report: { isShow: true, }, qr: { isShow: false, }, guide: { isShow: true } } } $(function() { $(document).on('click', "a.option-box[data-type='report']", function() { window.csdn.loginBox.key({ biz: 'blog', subBiz: 'other_service', cb: function() { window.csdn.feedback({ "type": 'blog', "rtype": 'article', "rid": articleId, "reportedName": username, "submitOptions": { "title": articleTitle, "contentUrl": articleDetailUrl }, "callback": function() { showToast({ text: "感谢您的举报，我们会尽快审核！", bottom: '10%', zindex: 9000, speed: 500, time: 1500 }) } }) } }) }); }) </script> <script src="https://g.csdnimg.cn/baidu-search/1.0.12/baidu-search.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/download/old_static/js/qrcode.js"></script> <script src="https://g.csdnimg.cn/lib/qrcode/1.0.0/qrcode.min.js"></script> <script src="https://g.csdnimg.cn/user-ordercart/3.0.1/user-ordercart.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/user-ordertip/5.0.3/user-ordertip.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/order-payment/4.0.5/order-payment.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/common-a425354f6a.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/detail-336f6971b5.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/column-f814d377e0.min.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/side-toolbar/3.4/side-toolbar.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/copyright/1.0.4/copyright.js" type="text/javascript"></script> <script> $(".MathJax").remove(); if ($('div.markdown_views pre.prettyprint code.hljs').length > 0) { $('div.markdown_views')[0].className = 'markdown_views'; } </script> <script type="text/javascript" src="https://csdnimg.cn/release/blog_mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ "HTML-CSS": { linebreaks: { automatic: true, width: "94%container" }, imageFont: null }, tex2jax: { preview: "none", ignoreClass:"title-article" }, mml2jax: { preview: 'none' } }); </script> <script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script></html>
本文探讨了在开发中实现PDF预览和下载的不同方法，包括使用