Vue导出、下载(二进制流文件、url、谷歌批量下载)
Vue导出、下载(二进制流文件、url、谷歌批量下载)
·
Vue文件导出下载
url导出
window.open(res.data.fileUrl, '', '');
会被浏览器直接打开的文件下载(xml文件)
// 将url转成blob地址,
const url = res.data.obj;
const a = document.createElement('a');
fetch(url)
.then((res) => res.blob())
.then((blob) => {
// 将链接地址字符内容转变成blob地址
a.href = URL.createObjectURL(blob);
console.log(a.href);
a.download = url.split('/')[url.split('/').length - 1]; // // 下载文件的名字
document.body.appendChild(a);
a.click();
});
二进制流(EXCEL文件)
// api文件
export const exportedList = (data) => {
return defaultAxios.post('/outPutExcel', data, {
cancelRequest: true,
noTip: true,
responseType: 'blob',
})
}
// vue文件
exportedZhiXingList(data).then(res => {
let blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 默认excel
let filename = "导出文件名.xls"
// let URL = window.URL || window.webkitURL
let objectUrl = window.webkitURL.createObjectURL(blob)
// console.log(objectUrl);
let a = document.createElement('a')
a.href = objectUrl
a.download = filename
document.body.appendChild(a)
a.click()
a.remove()
})
挂在dom树上(批量下载使用)
备注:因为未知原因,谷歌浏览器段时间多次window.open仅能打开最后一次想打开的页面而采用的备用方案。
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 防止影响页面
iframe.style.height = 0; // 防止影响页面
iframe.src = url;
document.body.appendChild(iframe); // 这一行必须,iframe挂在dom树上才会发请求
// 5分钟之后删除(onload方法对于下载链接不起作用)
setTimeout(() => {
iframe.remove();
}, 5 * 60 * 1000);
问题与解决
1.The HTTP request is not acceptable for the requested resource
直接打开网址没问题,通过超链接或window.open打开报错:The HTTP request is not acceptable for the requested resou
https://blog.csdn.net/menggudaoke/article/details/103144401/
Vue项目中报错The HTTP request is not acceptable for the requested resource
https://blog.csdn.net/weixin_49154644/article/details/128373036
找到public下的index.html在head标签中添加
<meta name="referrer" content="no-referrer" />
更多推荐
已为社区贡献2条内容
所有评论(0)