vue3-web端文件下载

最新推荐文章于 2024-08-20 09:20:20 发布

浮桥

最新推荐文章于 2024-08-20 09:20:20 发布

阅读量618

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44801790/article/details/132869009

版权

文章介绍了在Vue中使用a标签和JavaScript下载文件时遇到的跨域问题，讨论了download属性的限制，并提供了使用HTML5Blob解决文件名修改和跨域下载的方法。

摘要由CSDN通过智能技术生成

1、使用`a`标签下载

	<a
      ref="downloadRef"
      :href="downloadInfo.url"
      :download="downloadInfo.name"
      v-show="false"
    ></a>

import { ref, unref, reactive, onMounted, nextTick } from "vue"

//下载文件
const download2 = function (url: string, name: string) {
  downloadInfo.url = url;
  downloadInfo.name = name;
  
  nextTick(() => {
    unref(downloadRef).click()
  })
}

2、使用js代码实现文件下载

//下载文件
const download2 = function (url: string, name: string) {
  const link = document.createElement("a")
  // link.target = '_blank';
  link.href = url
  link.download = name
  document.body.appendChild(link);
  link.click()
  document.body.removeChild(link);
}

注：下载文件名不是自己提供给download 属性的名称，查阅发现当a标签的下载链接跨域时，download属性将不会生效，原因是浏览器无法获取到文件，不能对他进行更改。
html5 新特性a标签download属性只支持谷歌和火狐
在谷歌和火狐浏览器a标签download属性修改文件名失效的原因：不同源，访问的域名和href的域名要一致。

解决方法：
使用HTML5 Blob实现文件下载，先把文件以bobl的形式下载到当前页面，再创建a标签。

// 下载文件
const download = function (aUrl: string, name: string) {
  const x = new XMLHttpRequest();
    x.open('GET', aUrl, true);
    x.responseType = 'blob';
    x.onload = function (e) {
      const url = window.URL.createObjectURL(x.response);
      const elink = document.createElement('a');
      elink.href = url;
      elink.target = '_self'; 
      // elink.setAttribute('download', name);
      elink.download = `${name}`;
      elink.style.display = 'none';
      document.body.appendChild(elink);
      setTimeout(() => {
        elink.click();
        document.body.removeChild(elink);
      }, 66);
    };
    x.send();
}