下载最简单的方法就是用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

Logo

前往低代码交流专区

更多推荐