Vue导出、下载（二进制流文件、url、谷歌批量下载）

Vue文件导出下载

• Vue文件导出下载
• • url导出
  • 会被浏览器直接打开的文件下载（xml文件）
  • 二进制流（EXCEL文件）
  • 挂在dom树上（批量下载使用）
• 问题与解决

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/-excel' }) // 默认excel
  let filename = "导出文件名.xls"
  // let URL =  || 
  let objectUrl = window.webkitURL.createObjectURL(blob)
  // (objectUrl);
  let a = document.createElement('a')
  a.href = objectUrl
  a.download = filename
  document.body.appendChild(a)
  a.click()
  a.remove()
})

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

挂在dom树上（批量下载使用）

备注：因为未知原因，谷歌浏览器段时间多次仅能打开最后一次想打开的页面而采用的备用方案。

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
直接打开网址没问题，通过超链接或打开报错：The HTTP request is not acceptable for the requested resou
/menggudaoke/article/details/103144401/
Vue项目中报错The HTTP request is not acceptable for the requested resource
/weixin_49154644/article/details/128373036
找到public下的在head标签中添加

<meta name="referrer" content="no-referrer" />