VUE 通过URL下载修改文件名的方法 和原生js 下载

今天遇到一个需求需要通过url下载的时候修改下载的文件名称,vue框架和原生的框架不同所以整理了以下可用的方法

vue框架

let url = '';
fetch(url).then((res) => {
res.blob().then((blob) => {
const url = window.URL.createObjectURL(blob)

const a = document.createElement('a')

a.href = url

a.download =  '你要改的文件名.后缀';

a.click()

window.URL.revokeObjectURL(url)

})
})

js 原生框架

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", url, true);
xhr.onload = function () {
const blob = new Blob([this.response], {type:"application/vnd.ms-excel"});
if(blob.size < 1) {
alert('导出失败,导出的内容为空!');
return;
}
if(window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, 'test.xls')
} else {
const aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = window.URL.createObjectURL(blob);
aLink.download = 'testxls';
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
return;
}
}
xhr.setRequestHeader("Authorization", "xxx");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(queryParams));

如有问题请给我留言谢谢

 

VUE 通过URL下载修改文件名的方法 和原生js 下载-上流阁

*文章为作者独立观点,不代表上流阁立场
本文由 江风成 授权 上流阁 发表,并经上流阁编辑。转载此文章须经作者同意,并请附上出处(上流阁)及本页链接。原文链接https://www.o6c.com/web/2021/06/02/1478.html
发表评论

坐等沙发
相关文章
VUE el-input__suffix样式大小修改
VUE el-input__suffix样式大小修改
VUE el ui el-date-picker时间禁用范围禁用干货
VUE el ui el-date-picker时间禁用范围…
vue中axios 插件上传blob资源
vue中axios 插件上传blob资源
html用css实现关闭文本框输入法切换输入法
html用css实现关闭文本框输入法切换输入法
html5手机端播放器可拖动播放自定义播放器
html5手机端播放器可拖动播放自定义播放器
Web前端html5网页three.js、earth会转动的地球
Web前端html5网页three.js、earth会转动…
javaweb开发程序员php开发,微信开发。接受定制开发

最新评论