vue 实现文件下载（从后台请求的数据）（包括下载图片、pdf、word等文件格式）

分手后的思念是犯贱 2023-06-23 12:56 45阅读 0赞

下载最简单的方法就是用a链接实现，然后加一个download属性。但是有一个问题，从后台请求回的接口，对于图片和pdf及svg都不能实现下载功能，也就是download没有起作用。所以下面的方法就是解决这个问题的。

<a @click="downloadFile(file.name, file.url)" >下载</a>
    
    /* 第一个参数是文件的名字，第二个参数是文件的路径*/
    
    downloadFile(fileName, data) {
          if (!data) {
            return;
          }
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        }

很简单，其实主要是把url转为\[blob\]文件格式

如果可以的话也可以直接让后端返回文件流格式的路径，也就不用自己再转换了，直接

让后端返回\[blob\]文件格式，需要传递 **responseType: ‘blob’**

参考文章：[https://blog.csdn.net/ying940718/article/details/98500667][https_blog.csdn.net_ying940718_article_details_98500667]

[https_blog.csdn.net_ying940718_article_details_98500667]: https://blog.csdn.net/ying940718/article/details/98500667