1.jq处理二进制乱码方法
封装接口的时候 要加入blob类型 需注意 用jq 要使出最原始的方法封装它
//导出
blobPostJs:function (url, data , successCallback, errorCallback) {
var xhr = new XMLHttpRequest();
xhr.open('post', url, true);
xhr.responseType = "blob"; // 返回类型blob
xhr.setRequestHeader('Content-Type','application/json;charset=utf-8',
);
xhr.setRequestHeader("msg", "param");
xhr.setRequestHeader('jmis-auth','bearer ' + token,);
xhr.setRequestHeader('x-access-token',token,);
xhr.setRequestHeader('Access-Control-Allow-Credentials',true,);
xhr.onload = function () {
if (this.status === 200) {
var blob = new Blob([this.response])
successCallback(blob)
}else{
console.log("下载失败")
}
};
// 发送ajax请求
xhr.send(null)
}
};
用法:
// 下载模板
updatafile(){
AjaxUtil.blobPostJs( '/jmis-cloud/api/gis/airport/exportTemplate', {}, function(response) {
const url = window.URL.createObjectURL(response)
const link = document.createElement('a')
link.href = url
let type ='.xlsx'
const filename = "机场数据模版" + type;
link.download = filename;
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url);
}, function(error) {
console.log(error);
});
}
2.vue处理二进制乱码 方法
与jq同理 在调用接口的时候处理下responseType:‘blob’
blobPost: function (url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: url,
data: data,
responseType: 'blob',
...config
}).then((response) => {
resolve(response);
}).catch((error) => {
reject(error);
})
})
},
用法:
async downloadTemplate() {
const res = await this.apiObj.exportTemplate()
this.importVisible = false;
console.log('1111',res.data);
const url = URL.createObjectURL(new Blob([res.data]));
console.log(222, url);
const link = document.createElement("a");
link.style.display = "none";
link.href = url;
let type = res.headers["content-disposition"].substr(20);
const filename = "机场数据模版" + new Date().getTime() + type;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
},
总结:这两种导出的方法大差不差 但是使用封装的时候需要注意一下
最后 感谢阅读 如果有不足之处 请指出