PC或者移动端下载文件（包括excel、图片等）到本地
一、方案
根据平台有不同的方案：
PC
主要使用 window.open 方法，直接调用接口，接口返回文件直接下载移动端
主要通过 file\img 转 base64，通过 a[download] 来下载
二、代码实现
2.1 PC
如果下载接口需要登录态，且通过 cookie 传递
window.open(接口, '_blank');
如果下载接口需要登录态，且通过自定义 headers 字段传递
// 下载文件流
// axios 需要传 responseType: 'blob'，和 url data 平级
export function downloadTemplate(data = {}, headers = {}) {
return request({
url: '/web/addFriend/downloadTemplate',
method: 'get',
responseType: 'blob',
data,
headers
})
}
// 使用 blob atag 进行下载
// 这里的 res 需要使用 axios 的整个 response，可以通过 response.headers['content-type'].indexOf('application/octet-stream') !== -1 判断
function downloadFile(res) {
const url = window.URL.createObjectURL(new Blob([res.data]))
// 生成一个a标签
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
// 生成文件名，并且去掉多余的双引号
const fileNameStr = res.headers['content-disposition'].split(';').find(item => item.indexOf('filename') !== -1)
const fileName = fileNameStr ? fileNameStr.substring(fileNameStr.indexOf('=') + 1).replace(/\"/g, '') : Date.now()
link.download = decodeURIComponent(fileName)
link.click()
link = null
}
// 这里需要判断一下返回结果，因为有可能返回的是一个报错
// 参考这篇文章 https://www.jianshu.com/p/26f23345a4be
2.2 移动端
/**
* URL 转 base64
**/
convertImgToBase64 (url, callback) {
return new Promise(resolve => {
const img = new Image();
// 图片域名要开启跨域
// canvas 不能处理跨域图片，执行 canvas 操作前也要开启跨域
img.crossOrigin = 'Anonymous';
img.onload = function() {
let canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
const imgBase64 = canvas.toDataURL("image/png");
canvas = null;
resolve(imgBase64);
};
img.src = url;
})
},
// 下载
handleSave() {
this.convertImgToBase64(this.url)
.then(imgBase64 => {
const a = document.createElement("a");
const event = new MouseEvent("click");
a.download = name || "photo";
a.href = imgBase64;
a.dispatchEvent(event);
});
}
三、遇到的问题
暂无
