vue中文件的下载(三种

1. 后端返回一条路径,你拼上ip,就可以到服务器拿到资源

 let url = '' // 文件的路径 2 window.open(url) 

 

2. 后端返回的是文件流的形式

请求的js文件:

注意,这里的关键是,再请求中要添加响应的类型:responseType: "blob" ,否则导出文件是会报错的

// 下载模板
export function importTemplate(data) {
  return request({
    url: '/distributionServices/businessPersonnel/importTemplate',
    method: 'post',
    responseType: "blob",
    data
  })
}

请求处理:

// 引入请求
import { importTemplate } from "@/api/coverageStatistics/insuredPersonnel";

// 下载模板
    getTemplate(){
      importTemplate().then(res=>{
        const fileName = `xxx模板.xlsx`
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'});
        // 兼容IE写法
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, decodeURI(fileName));
          return;
        }
        const downloadElement = document.createElement('a');
        // 创建下载的链接
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        // 下载后的文件名
        downloadElement.download = decodeURI(fileName);
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 下载
        // 下载完成 移除 a
        document.body.removeChild(downloadElement);
        // 释放blob对象
        window.URL.revokeObjectURL(href);
      })
    }

 

3. 后端返回base64 的形式

请求如下:

需要将base64转码转成文件的形式,关键:uInt8Array[i] = raw.charCodeAt(i);

// 下载
      downFile(item) {
        console.log('下载前的内容')
        console.log(item);
        const fileName = item.fileName
        // atob(这里面放文件流应该也是可以)
        var raw = window.atob(item.base64);
        var uInt8Array = new Uint8Array(raw.length);
        for (var i = 0; i < raw.length; i++) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        const blob = new Blob([uInt8Array]);
        // 兼容IE写法
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, decodeURI(fileName));
          return;
        }
        const downloadElement = document.createElement('a');
        // 创建下载的链接
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        // 下载后的文件名
        downloadElement.download = decodeURI(fileName);
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 下载
        // 下载完成 移除 a
        document.body.removeChild(downloadElement);
        // 释放blob对象
        window.URL.revokeObjectURL(href);
      }

 

posted @ 2022-03-24 16:13  aichihaidilao  阅读(556)  评论(0)    收藏  举报