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()
})

补充：H5 之 文件流转base64下载

挂在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" />