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); }

浙公网安备 33010602011771号