PC或者移動(dòng)端下載文件（包括excel堕战、圖片等）到本地
一阅悍、方案
根據(jù)平臺(tái)有不同的方案：
PC
主要使用 window.open 方法，直接調(diào)用接口履怯，接口返回文件直接下載移動(dòng)端
主要通過 file\img 轉(zhuǎn) base64艇潭，通過 a[download] 來下載
二拼窥、代碼實(shí)現(xiàn)
2.1 PC
如果下載接口需要登錄態(tài)，且通過 cookie 傳遞
window.open(接口, '_blank');
如果下載接口需要登錄態(tài)蹋凝，且通過自定義 headers 字段傳遞
// 下載文件流
// axios 需要傳 responseType: 'blob'鲁纠，和 url data 平級(jí)
export function downloadTemplate(data = {}, headers = {}) {
return request({
url: '/web/addFriend/downloadTemplate',
method: 'get',
responseType: 'blob',
data,
headers
})
}
// 使用 blob atag 進(jìn)行下載
// 這里的 res 需要使用 axios 的整個(gè) response，可以通過 response.headers['content-type'].indexOf('application/octet-stream') !== -1 判斷
function downloadFile(res) {
const url = window.URL.createObjectURL(new Blob([res.data]))
// 生成一個(gè)a標(biāo)簽
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
// 生成文件名仙粱，并且去掉多余的雙引號(hào)
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
}
// 這里需要判斷一下返回結(jié)果，因?yàn)橛锌赡芊祷氐氖且粋€(gè)報(bào)錯(cuò)
// 參考這篇文章 http://www.reibang.com/p/26f23345a4be
2.2 移動(dòng)端
/**
* URL 轉(zhuǎn) base64
**/
convertImgToBase64 (url, callback) {
return new Promise(resolve => {
const img = new Image();
// 圖片域名要開啟跨域
// canvas 不能處理跨域圖片彻舰，執(zhí)行 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);
});
}
三伐割、遇到的問題
暫無
