vue文件下载-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46978096/article/details/134891387

博客介绍了前端开发的两种方法，涉及Vue.js和JavaScript等技术，为前端开发提供不同思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法

const downloadfile = (url) => {
  if (!url) {
    return ElMessage.error("暂无文件！无法下载")
  }

  axios({
    url,
    method: 'GET',
    responseType: 'blob'
    // headers: {
    //   token:getCache('TOKEN'),     // 可以携带token
    // }
  }).then(res => {
    const href = URL.createObjectURL(res.data);
    const a = document.createElement('a');
    a.download = '名字.pdf';//后缀改为对应的文件类型
    a.href = href;
    a.click();
    setTimeout(() => {
      a.remove();
    }, 100);
  });
}

第二种方法

 //response为文件流
 //不同类型的文件用不同类型的type
 const blob = new Blob([response], {
  type: "application/msword",
 });
 const fileName = "名字.xlsx";//后缀改为对应的文件类型

 const elink = document.createElement("a");

 elink.download = fileName;

 elink.style.display = "none";

 elink.href = URL.createObjectURL(blob);

 document.body.appendChild(elink);

 elink.click();

 URL.revokeObjectURL(elink.href); // 释放URL 对象
 document.body.removeChild(elink);

// res.data为文件流
 const href = URL.createObjectURL(res.data);
  const a = document.createElement('a');
	a.download = 'xxx.xlsx'//文件名.文件后缀
  a.href = href;
  a.click();
  setTimeout(() => {
    a.remove();
  }, 1000);