浏览器点击pdf的链接——实现下载或预览功能—

最近在做后台管理系统时，遇到了一个需求，就是点击pdf链接时，需要实现文档的下载。

点击链接，通常就会用到a标签，将链接放在href参数中，点击时就会触发相应的事件了。

常规写法如下：

<a :href="bomUrlOri" rel="nofollow" target="_blank" style="color:#f90;text-decoration:underline">下载文件</a>

其他格式的文件比如：excel表格文件，点击上面的a标签时，会自动将文件下载下来。但是如果是pdf文件，则会直接打开新窗口预览文件。

查找资料并询问公司大神后，发现如果想要直接下载pdf文件，则此文件的链接扩展名需要是.PDF，而非.pdf。如果扩展名是.pdf，则默认会预览。如果扩展名为.PDF，则会直接下载，部分也会实现下载后预览的效果。具体原因未知。

文件的扩展名，好像是没有办法程序去更改的，除非文件本身的扩展名更改为.PDF，然后上传到阿里云，拿到线上链接，此时这个链接渲染到页面上，点击才会出现下载。具体阿里云OSS部分是否可以设置.pdf为.PDF，我就不太清楚了。

附录：

实现下载并预览的测试链接：https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//Bom/bom/2022/1/19/2022011911355693652034.PDF
实现预览的测试链接：https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//Bom/bom/2022/1/19/2022011911370824626513.pdf

我当前的测试环境：谷歌浏览器。其他内核的浏览器暂未测试。

浏览器点击pdf的链接——实现下载或预览功能——基础积累相关推荐

SpringBoot实现服务器PDF文件的下载和预览功能
office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
Office文件转化PDF实现预览功能
OpenOffice文件转PDF 实测有用 OpenOffice办公文件预览功能 OpenOffice操作 aspose-words来实现预览预览操作 OpenOffice办公文件预览功能 Hell ...
SpringBoot+MongoDB GridFS文件上传、下载、预览实战
SpringBoot + MongoDB GridFS 随着web 3.0的兴起,数据的形式不局限于文字,还有语音.视频.图片等.高效存储与检索二进制数据也成为web 3.0必须要考虑的问题.然而这种 ...
下载并预览pdf，提示未能加载PDF文档 - vue
后端传一个字符串,前端创建了new Blob,Chrome提示无法加载PDF文档? 后面尝试使用a标签下载,提示无法打开: 控制台窗口blob和url,有显示数据,但是但不开,是什么原因呢??? 网上 ...
vue pdf下载及预览（移动端）
本文使用的是 vue-pdf,其实还有其他的很多比如pdf.js,只不过觉得这个和vue结合了应该不用下载一堆东西,直接npm install就可以,所以采用vue-pdf来撰写pdf下载及预览. 无 ...
安卓手机实现无需下载即可预览pdf文件
1.从pdf.js官网中下载实例,里面可以把相关的文件放在oss或者web服务上,但是要修改demo中的html文件(Mac打不开该实例的html文件,打开是个空白,window可以,原因未知,不影响 ...
微信小程序saveFile，openDocument方法下载、预览pdf文件不能用本地应用打开（不能另存为）的问题
微信小程序saveFile,openDocument方法下载.预览pdf文件不能用本地应用打开(不能另存为)的问题查看官方文档的openDocument()方法,发现加一个showMenu: tru ...

浏览器点击pdf的链接——实现下载或预览功能——基础积累

浏览器点击pdf的链接——实现下载或预览功能——基础积累相关推荐

最新文章

热门文章