自定义非同源文件下载时的文件名
in 前端 with 0 comment

自定义非同源文件下载时的文件名

in 前端 with 0 comment

<a>标签有个download属性可以自定义下载文件的文件名

const url = '下载的文件url'
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '自定义名称')
document.body.appendChild(link)
link.click()

但是该属性仅支持同源路径自定义名称,当页面在a.baidu.com下,文件在b.baidu.com下时,定义该属性就失效了。

这时可以先下载文件,把文件转为blob(同源之后)再触发本地下载

import axios from "axios";
// 下载文件(可解决跨域下载问题)
export async function downloadFile(fileUrl, fileName) {
  if (!fileUrl) return;
  let res = await axios({
    method: "get",
    url: fileUrl,
    responseType: "blob"
  });
  let newUrl = window.URL.createObjectURL(res.data);
  let a = document.createElement("a");
  a.href = newUrl;
  a.download = fileName;
  a.click();
  a.remove();
  //在资源下载完成后 可以人工清除createObjectURL 占用的缓存资源
  window.URL.revokeObjectURL(newUrl);
}

参考

<a> - HTML(超文本标记语言) | MDN

vue如何根据url下载非同源文件

Comments are closed.