- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
在测试时发现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标签实现的文件下载功能相对简单，适用于对文件格式要求不高的简单下载场景。
使用那种下载方式，看业务需求。