1 使用downloadjs
1.1 下载
npm install downloadjs
import download from 'downloadjs';
download(data, filename, mimeType);
// data 是要下载的文件内容，可以是 Blob、Buffer、ArrayBuffer、URL、字符串等；
// filename 是要保存的文件名；
// mimeType 是文件的 MIME 类型，可选。-- 如果不写则自动识别
2 使用a链接跳转方式
- 虽然是打开新窗口的形式，但指向过去后，浏览器会自动解析下载，并自动关闭这个新窗口
注： 只支持GET方式的请求 ( 因为GET请求不受同源策略的影响与限制 )如果不理解GET请求为什么不受同源策略的影响与限制 想想原生jsonp是怎么解决跨域的。
2.1 封装a链接公共方法
// url 为接口地址
export const openWindow = (url) => {
const aTag = document.createElement('a')
// 直接将a链接指向完整的接口请求地址，
aTag.href = `${'接口请求地址'}${url}`
aTag.setAttribute('download', '自定义的文件名')
aTag.target = '_blank'
aTag.click()
}
// 以下是接口举例 // 后面会用到
export function exce(params) {
return request({
method: "GET",
url: "接口地址",
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
});
}
export const excels = "接口地址"
2.2 使用
import { downloadFile } from "@/utils/index";
import { excels } from "@/api/index";
methods:{
openWindow(`${excels }`)
}
2.3 问题描述与解决
-
虽然上述方法看起来很方便，但这个接口一旦报错，浏览器就无法解析到数据，这个新窗口也不会自动关闭，会把错误信息展示出来，例如：效果图
- 如果觉得接口肯定不会报错或者能接受，那下面的就不用看了，因为我自己都觉得这样写很呆
解决办法，先调用接口，判断接口未报错再调用公共方法
- 具体怎么做，感觉都会，反正很呆，细节就不写了
3.解析文件流方式下载文件
3.1接口请求
// 模板下载
import request from "@/resources/request.js"
export function downloadExcel () {
return request({
method: "GET",
url: "接口请求地址",
})
}
3.2定义下载文件流方法
// 下载文件流
export const downloadFile = (res) => {
const blob = new Blob([res], {
type:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
"application/vnd.ms-excel",
}) // 此处指定了只适用于 .xlsx xls 文件，可自行调整想要适配的文件或不指定
// 通过URL.createObjectURL生成文件路径
const url = window.URL.createObjectURL(blob);
// 获取文件名称
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
let contentDisposition = decodeURI(res.headers['content-disposition'])
let result = patt.exec(contentDisposition)
let fileName = result[1]
fileName = fileName.replace(/\"/g, '')
// 创建a标签
const ele = document.createElement("a");
// 设置href属性为文件路径，download属性可以设置文件名称
ele.setAttribute('download', fileName)
ele.download = '文件'// 下载文件的文件名
// 设置href属性为文件路径，download属性可以设置文件名称
ele.href = url;
// 将a标签添加到页面并模拟点击
document.querySelectorAll("body")[0].appendChild(ele);
ele.click();
// 移除a标签
ele.remove();
}
// 下载文件流
export const downloadFile = (res, val) => {
const blob = new Blob([res], {
type:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
}) // for .xlsx files
// 通过URL.createObjectURL生成文件路径
const url = window.URL.createObjectURL(blob)
// 创建a标签
const ele = document.createElement("a")
ele.style.display = "none"
ele.download = val
// 设置href属性为文件路径，download属性可以设置文件名称
ele.href = url
// 将a标签添加到页面并模拟点击
document.querySelectorAll("body")[0].appendChild(ele)
ele.click()
// 移除a标签
ele.remove()
}
- 此时文件确实下载成功了，但你会发现文件里的内容没有，只是下载了个空的文件回来，此时需要指定下指定响应的数据类型，防止出现解析错误
3.3修改接口请求(指定响应数据类型)
import request from "@/resources/request.js"
// 模板下载
export function downloadExcel () {
return request({
method: "GET",
url: "接口请求地址",
responseType: "blob",
// responseType: "arraybuffer"
})
}
- 如果想Blob文件对象转化为其他格式的数据，可借助FileReader对象的API进行操作
FileReader.readAsText(Blob) // 将Blob转化为文本字符串;
FileReader.readAsArrayBuffer(Blob)： // 将Blob转为ArrayBuffer格式数据
FileReader.readAsDataURL() // 将Blob转化为Base64格式的Data URL
