在测试时发现word等文件可以下载,而pdf文件却是进行预览而不是下载
,这肯定是不行的,于是开始到网上寻找解决方法。开始时感觉是一件挺简单的事。结果发现要么是实现不了效果,要么代码巨多且需要后端配合。

今天把思路提供给大家

第一种方式,下载依赖
// 安装file-saver npm i file-saver
代码
const that = this var oReq = new XMLHttpRequest() var URL= '' // URL 为URL地址
oReq.open('GET', URL, true) oReq.responseType = 'blob' oReq.onload = function()
{ var file = new Blob([oReq.response], { type: 'blob' }) FileSaver.saveAs(file,
that.name) // that.name为文件名 } oReq.send()
代码解释(不研究的可以划过):

这段JavaScript代码的作用是从指定的URL地址获取文件并以指定的文件名保存在本地。

代码的具体执行过程如下:

* 创建一个XMLHttpRequest对象(oReq)来发送异步HTTP请求。
* 打开GET请求,指定URL地址(URL)和是否为异步请求(true)。
* 设置响应类型为’blob’,即获取的数据为Blob类型。
* 当请求加载成功时,使用获取的数据创建一个Blob对象(file),并使用FileSaver.js库的saveAs方法将文件保存到本地。
* 发送HTTP请求。
代码拓展

然后细心钻研了一番,发现file-saver依赖的实现,是通过a标签链接做实现的,然后我又做了一版不需要file-saver的
const that = this var oReq = new XMLHttpRequest() var URL = '' // URL oReq.
open('GET', URL, true) oReq.responseType = 'blob' oReq.onload = function (res) {
var file = new Blob([oReq.response], { type: 'blob' }) const a = document.
createElement("a"); const URL = window.URL || window.webkitURL; const herf = URL
.createObjectURL(file); a.href = herf; a.download = '文件名' document.body.
appendChild(a); a.click(); document.body.removeChild(a); window.URL.
revokeObjectURL(herf); } oReq.send()
并没有做封装处理,如果只需要实现简单的文件下载功能,或者希望代码更加轻量级,可以选择通过创建a标签实现文件的下载。

从实现方式上来说,
FileSaver.js库提供了更丰富的功能和更易用的API,可以更方便地实现对不同类型文件的下载。而通过创建a标签实现的文件下载功能相对简单,适用于对文件格式要求不高的简单下载场景。

使用那种下载方式,看业务需求。

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信