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

下载最简单的方法就是用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]文件格式

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

<a :href="item.src" :download="item.name"/> 

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

function downloadPost (config){
  return new Promise((resolve,reject) => {
    axios({
        url: config.url,
        method: 'post',
        data: config.data,
        responseType: 'blob'
    }).then(res => {
      resolve(res)
    }).catch(err=>{
      reject(err);
    });
  });
}

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