1.js保存自定义内容至本地文件
例如:想要把“hello world”作为内容生成txt文件保存至本地
IE 浏览器:使用微软自带的msSaveBlob 方法,a标签的download属性不支持IE
// for ie 10 and later
if (window.navigator.msSaveBlob) {
try {
window.navigator.msSaveBlob(url或blob,downloadFileName);
}
catch (e) {
console.log(e);
}
}
(兼容Chrome和Firefox)
saveContent = (content, fileName) =>{
let downLink = document.createElement('a');
downLink.download = fileName;
//字符内容转换为blod地址
let blob = new Blob([content]);
downLink.href = URL.createObjectURL(blob);
// 链接插入到页面
document.body.appendChild(downLink);
downLink.click();
// 移除下载链接
document.body.removeChild(downLink)
};
content是需要下载的内容(字符串)
fileName是保存的文件的名字
原理就是利用Blob对象把需要下载的内容转换为二进制,然后借助<a>标签的href属性和download属性,实现下载。
使用:
let str = 'hello world';
let fileName = '示例.txt'
this.saveContent(str, fileName)
2.接受后台返回二进制流进行文件下载到本地
例如:接口返回数据格式如下图
通过a标签动态下载
handelDownLoad = (id) => {
// 动态设置请求后台接口时请求头(以下载pdf为例子)
let header = {
"Content-type": 'application/pdf',
"charset" : "utf-8",
};
ajax.get(`url`, null, header).then(res=>{
let result = res.data;//后台返回的二进制流
let fileName = '示例'; // 下载文件名(也可通过后台参数动态设置文件名)
if(result){
if(result.code && result.msg){
notification.error({
description: res.msg
});
return
}
const url = window.URL.createObjectURL(
new Blob([result], {type: "application/pdf"})
);
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', decodeURI(fileName));
document.body.appendChild(link);
link.click();
document.body.removeChild(link)
}
})
};