問題: 背景画像インターフェイスを呼び出すと、背景がバイナリ ストリーム画像データ形式を返します。フロントエンドがストリームを受信すると、処理されたデータが img タグに表示されます。
解決：
1. axios 受信パラメーター形式を「arraybuffer」に設定します。
responseType: 'arraybuffer'
2. base64 形式に変換された画像データが img タグに表示されます。
return 'data:image/png;base64,' + btoa(
new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
);
返された文字列は、img タグ src に直接表示できます
2. axios 受信パラメーター形式を「blob」に設定します。
axios.post( ExportUrl, Params, {
responseType: 'blob'
})
.then(function(response) {
this.url = window.URL.createObjectURL(new Blob([response.data]));
});
3. a タグを介してファイルをダウンロードします
const url = '下载的url链接';
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
link.setAttribute('download', 'Excel名字.xlsx');
document.body.appendChild(link);
link.click();
responseType 値のタイプ
| 価値 | データの種類 |
|---|---|
| '' | DOMString (デフォルトの型) |
| 配列バッファ | ArrayBuffer オブジェクト |
| ブロブ | ブロブ オブジェクト |
| 書類 | ドキュメント オブジェクト |
| json | サーバーから返された JSON 文字列から解析された JavaScript オブジェクト |
| 文章 | DOM文字列 |
例
戻り値のさまざまなケースの処理方法は次のとおりです。
①. リクエストは responseType: 'arraybuffer' に設定されます.
リクエストが成功すると、バックエンドはファイル ストリームを返し、ファイルを正常にエクスポートします;
リクエストが失敗すると、バックエンドは次のような json オブジェクトを返します: {"Status" :"false","StatusCode": "500", "Result": "操作に失敗しました"}、配列バッファにも変換
このとき、リクエストの成功と失敗で返される HTTP ステータス コードは 200 です。
解決策: arraybuffer 型に変換したデータを Json オブジェクトに戻してから判断する
コードは以下のように表示されます
async downloadFile (file) {
let res = await this.$axios.post(this.API.order.tradeImpExcle, {
responseType: "arraybuffer" });
if (!res) return;
try {
//如果JSON.parse(enc.decode(new Uint8Array(res.data)))不报错，说明后台返回的是json对象，则弹框提示
//如果JSON.parse(enc.decode(new Uint8Array(res.data)))报错，说明返回的是文件流，进入catch，下载文件
let enc = new TextDecoder('utf-8')
res = JSON.parse(enc.decode(new Uint8Array(res.data))) //转化成json对象
if (res.Status == "true") {
this.refresh()
this.$message.success(res.Msg)
} else {
this.$message.error(res.Result)
}
} catch (err) {
const content = res.data;
const blob = new Blob([content]);
let url = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute(
"download",
res.headers["content-disposition"].split("=")[1]
);
document.body.appendChild(link);
link.click();
}
}
②、responseType:'blob'にリクエストを設定し、
解決策: blob 型に変換したデータを Json オブジェクトに戻してから判断する
コードは以下のように表示されます
async downloadFile (file) {
let formData = new FormData();
formData.append("allTradesExcelFile", file);
let res = await this.$axios.post(this.API.order.tradeImpExcle, formData, {
responseType: "blob" });
if (!res) return;
let r = new FileReader()
let _this = this
r.onload = function () {
try {
// 如果JSON.parse(this.result)不报错，说明this.result是json对象，则弹框提示
// 如果JSON.parse(this.result)报错，说明返回的是文件流，进入catch，下载文件
res = JSON.parse(this.result)
if (res.Status == "true") {
_this.refresh()
_this.$message.success(res.Msg)
} else {
_this.$message.error(res.Result)
}
} catch (err) {
const content = res.data;
const blob = new Blob([content]);
let url = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute(
"download",
res.headers["content-disposition"].split("=")[1]
);
document.body.appendChild(link);
link.click();
}
}
r.readAsText(res.data) // FileReader的API
}