关于前端下载的常用问题
1.前端利用a标签下载文件报文件格式于要拓展名不匹配
原因： // import '@/mock/mock' 注释掉
2. 后端返回图片url地址，前端利用a标签下载
解决： a标签 href 加个后最： a.href = `${imgsrc}?response-content-type=application/octet-stream`;
export class Utils{
static downloadFile(file, name){
let link = document.createElement('a')
let blob = new Blob([file], {type: 'application/vnd.ms-excel'})
link.style.display = 'none'
link.href = URL.createObjectURL(blob);
link.download = name //下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
static downFile(imgsrc, name) { //下载图片地址和图片名
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
let canvas = top.document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height)
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = top.document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.target = '_blank';
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
image.src = imgsrc + '?v=' + Date.now();
}
static downloadImage(imgsrc,name) {
const a = document.createElement('a');
a.href = `${imgsrc}?response-content-type=application/octet-stream`;
a.download = name || '';
a.click();
a.remove();
}
// 删除请求参数对象为null、空 、undefine的键
static deleteProtoryTypeOfNull(obj){
for ( var key in obj ){
if ( obj[key]|| obj[key] === 0){
// obj[key] = obj[key];
if ( obj[key] instanceof Object){
Utils.deleteProtoryTypeOfNull(obj[key])
}
}else{
delete obj[key]
}
}
return obj;
}
// 处理elment下拉数据
static transData(data, key='label', value='value'){
if(!data)return;
if(data instanceof Array){
return data.map(item => {
return {
...item,
value: item[key],
label: item[value],
}
})
}else if(data instanceof Object){
let arr = []
for(let i in data){
arr.push({
// ...item,
value: i,
label: data[i]
})
}
return arr
}else{
return []
}
}
}
