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

叶浩成520

已于 2023-09-06 11:51:48 修改

阅读量8.1k

点赞数 7

分类专栏：前端基础知识 javascript知识点文章标签：前端 pdf链接

于 2022-01-19 11:38:28 首次发布

本文链接：https://blog.csdn.net/yehaocheng520/article/details/122577124

版权

335 篇文章

订阅专栏

199 篇文章

订阅专栏

场景

最近在做后台管理系统时，遇到了一个需求，就是点击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

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