前端js通过a标签直接预览pdf文件，弹出下载页面问题

最新推荐文章于 2024-05-18 14:03:48 发布
最新推荐文章于 2024-05-18 14:03:48 发布
阅读量5.9k 收藏 3
点赞数 1
文章标签： html javascript vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013474230/article/details/119247563
版权

pdf文件，可通过a标签直接预览，其写法是将pdf文件的url地址直接放在a标签的href属性即可。

<a href="pdf文件地址" target="_blank">预览pdf文件</a>

注意：想通过这样方式预览pdf文件，需要保证pdf上传的时候其文件类型content-type一定要设置为pdf格式（即content-type=“application/pdf”），不然点击链接的时候，不能正常预览文件，会弹出下载页面

瑾瑜无瑕
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中预览pdf
蜗牛~~
07-18 1万+
如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可。可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签。通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异），这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决。后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，单页pdf可以直接使用。
Bootstrap fileinput文件上传预览插件使用详解
01-19
通过本文，你可以学习到如何封装或者开发一个前端组件，同时学习Bootstrap-fileinput组件的使用，封装后使用更加简单方便。 BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、...
用a标签实现下载和弹出新页签预览pdf
SZHFCLXX的博客
01-24 670
下载中href地址中有api即其实质就是调了个接口；而预览中的href地址是纯远程文件所在路径，不会有api的存在！如果出现点击查看弹出了新页签却不是预览而是继续下载的情况，多半就是复制的时候加了api忘了去掉，导致又去调了下载的接口，而不是去远程找文件展示！
这将是你看到过最全的pdf预览解决方案
qq_42365082的博客
07-07 6543
最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如（ie无法直接浏览），最终决定用，这篇文章记录一下我做技术选型的过程。pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 缺点：google的word excel ppt 预览资源，必须是公共可访问的。而且谷歌浏览器上点击就会下载，IE上可以选择是预览还是下载直接通过页面内嵌iframe 此外还可以在iframe标签之间提供一个提示类似这样 ......
关于ie中使用a标签无法打开（预览）pdf问题
gqz_的博客
10-11 5001
html代码： &lt;button id="cLink"&gt;pdf查看&lt;/button&gt; &lt;a target='_blank' href="#" id="jumpUrl"&gt;&lt;span id="jumpClick" &gt;&lt;/span&gt;&lt;/a&gt; js代码： $(fu
a 标签实现pdf，jpg图片预览及文件下载
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
04-19 1299
【代码】a 标签实现pdf，jpg图片预览及文件下载。
在vue中使用a标签跳转但是变成了下载怎么办
weixin_42575505的博客
01-26 754
如果在 Vue 中使用 <a> 标签进行跳转却变成了下载，可能是因为文件的 MIME 类型被浏览器误判为了可下载的文件。 解决方案有两种： 修改服务器配置，设置目标文件的 MIME 类型为 text/html。 使用 Vue 的 router 模块进行路由跳转，而不是使用 <a> 标签。在 Vue 组件中使用 this.$router.push(path) 可以实现路由...
pdf.js浏览器点击a标签在线预览pdf文件并且将下载功能隐藏
qq_34266804的博客
07-22 2102
问题: 使用pdf.js，实现浏览器点击a标签在线预览pdf文件并且将下载功能隐藏（实现只查看，不下载） 需要的的工具： pdf.js 下载地址 链接：https://pan.baidu.com/s/18StIkW1iAINWDClJma50xg 提取码：8azn 代码 1.a标签点击代码 其中——href="压缩包解压在系统中的路径/web/viewer.html?file=文件路径#page=1" < a href="压缩包解压在系统中的路径/web/viewer.html?.
a标签下载pdf文档
AngieLife
10-30 6451
开发过程中，有时我们需要点击a标签然后可以下载pdf文档，但是结果经常是pdf文档直接就在浏览器中打开了，那么想要直接下载需要怎么实现呢？ 实现方式： 在a标签的href中写上要下载的pdf文档的地址，加上download下载属性，最后记得让后台给.pdf加个content-type头：application/octet-strea！ ...
leetcode所有报错-books:前端记录
06-30
一个自适应，且自定义性强的弹出框（零依赖） 最著名的 tooltip/popover library 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input 用来创建、计算和格式化货币价值的不可变的框架，支持国际...
bumble-bee-js:一个简约的javascript框架，可轻松使用可组合的Widget和容器组件创建UI
05-18
·性感的前端框架· 通过创建健壮的，可组合的小部件和组件来构建和管理用户界面的UI框架。 ·带有可分离的，与环境不可知的基本实用程序库，该库附带大量的方法来帮助减少重复的任务· · 如果您的应用使用了UI...
leetcode所有报错-Awesome-Bookmarks:前端开发提高效率的一些库和软件
06-30
一个自适应，且自定义性强的弹出框（零依赖） 最著名的 tooltip/popover library 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input 用来创建、计算和格式化货币价值的不可变的框架，支持国际...
leetcode下载-blog:博客
06-29
一个自适应，且自定义性强的弹出框（零依赖） 最著名的 tooltip/popover library 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input 用来创建、计算和格式化货币价值的不可变的框架，支持国际...
【js】跳转到新标签打开PDF文件
lorogy的博客
01-10 7306
js打开pdf
vue a标签打开pdf的问题
AreYouOkLei的博客
04-29 1454
pdf路径问题： 1：pdf放到assets中 <a href="/assets/download/11.pdf" target="_blank">11</a> 并不能实现在新的页面打开PDF文件 2：pdf放到 创建src同级文件public， <a href="/public/download/11.pdf" target="_blank">11</a> 并不能实现在新的页面打开PDF文件 3.pdf放到 src同级文件static， &l
PDFJS支持超链接点击
最喜欢番茄
03-28 1112
pdfjs渲染时支持超链接跳转
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 185
换行标签 水平线标签
再次修改导航样式，看看哪个好看
lulei5153的博客
05-17 163
【代码】再次修改导航样式，看看哪个好看。
零基础HTML教程(34)--HTML综合实例
最新发布
程序员大阳
05-18 651
DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 生平简介 </ title > </ head > < body > <!-- 头部 --> < header > < h1 > 苏轼网 </ h1 > </ header > <!
通过pdf下载地址实现前端页面预览
05-21
可以通过使用第三方库 `pdf.js` 来实现前端页面预览。下面是一个简单的实现步骤： 1. 在 HTML 文件中引入 `pdf.js` 库和 `pdf.worker.js` 文件。 ```html <!-- 引入 pdf.js 库 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script> <!-- 引入 pdf.worker.js 文件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js"></script> ``` 2. 创建一个 `canvas` 元素用于显示 PDF 页面。 ```html <canvas id="pdf-canvas"></canvas> ``` 3. 编写 JavaScript 代码解析 PDF 文件并将其渲染到 `canvas` 上。 ```javascript // 获取 canvas 元素和 PDF 文件路径 const canvas = document.getElementById('pdf-canvas'); const pdfPath = 'https://example.com/example.pdf'; // 加载 PDF 文件 pdfjsLib.getDocument(pdfPath).promise.then(pdf => { // 获取第一页 return pdf.getPage(1); }).then(page => { // 计算页面大小 const viewport = page.getViewport({ scale: 1 }); // 设置 canvas 大小 canvas.width = viewport.width; canvas.height = viewport.height; // 获取渲染上下文 const context = canvas.getContext('2d'); // 渲染页面 const renderTask = page.render({ canvasContext: context, viewport }); return renderTask.promise; }).then(() => { console.log('PDF 页面渲染完成！'); }).catch(error => { console.error(error); }); ``` 通过以上步骤，就可以在前端页面中预览 PDF 文件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值