vue使用axios導(dǎo)出后臺返回的文件流為excel表格詳解
使用axios導(dǎo)出后臺返回的文件流為excel
之前有一個(gè)需求是要使用post請求，導(dǎo)出后臺返回的文件流并在表格中使用，大概思路為使用axios請求回?cái)?shù)據(jù)，定義數(shù)據(jù)為blob格式，再創(chuàng)建一個(gè)a標(biāo)簽自調(diào)就可以完成了
<button @click="download">導(dǎo)出</button>
data() {
? ? return {
? ? ? isClick: true,
? ? };
? },download() {
// 簡單的一個(gè)小節(jié)流
if (!this.isClick) {
return;
}
this.isClick = false;
axios({
method: "POST",
url: "",
data: {},
responseType: "blob", //定義為blob
}).then((res) => {
const file = new Blob([res.data], { type: "application/vnd.ms-excel" });
const url = URL.createObjectURL(file);
const a = document.createElement("a");
a.href = url;
a.click();
this.isClick = true;
});
},vue axios導(dǎo)出excel亂碼解決
最近，公司讓我寫一個(gè)導(dǎo)出excel的功能，由于已經(jīng)有了前人寫好的代碼，我就直接拿著他的代碼改了一下，結(jié)果在前端下載好之后直接出現(xiàn)了亂碼問題。
開始我懷疑自己哪里寫錯(cuò)了，經(jīng)過仔細(xì)的檢查，并沒有問題。而且在后臺生成的excel并沒有任何問題。
后來我以為是讀入字節(jié)流出現(xiàn)了問題，經(jīng)過調(diào)試對比也是正常的。唯一的問題就是通過后臺返回的res出現(xiàn)了亂碼。
上網(wǎng)搜索，都說這樣寫就行了。
和我寫的一樣。在經(jīng)過了一天的檢查還是無果后，我問了問前輩，原來問題出在這里。
.post("/TasksTable/ExportData",{
item: {
//傳入項(xiàng)目id，根據(jù)項(xiàng)目id來 搜素任務(wù)
project_id: this.tasksinfo,
},
//頁的索引和頁的長度。
PageSize: this.pageSize,
PageIndex: this.currentPage,
//定義類型
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
responseType:'blob',
})
如圖所示，我用一個(gè)花括號把我傳入的數(shù)據(jù)和 headers、responseType放在了一起，所以headers和responseType無效了。
.post("/TasksTable/ExportData",{
item: {
//傳入項(xiàng)目id，根據(jù)項(xiàng)目id來 搜素任務(wù)
project_id: this.tasksinfo,
},
//頁的索引和頁的長度。
PageSize: this.pageSize,
PageIndex: this.currentPage,
},
{
//定義類型
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
responseType:'blob',
})
把他們用兩個(gè)花括號隔開就可以了。最終成功導(dǎo)出！
找不到原因的感覺真頭疼啊，看了一天沒找到原因，最終通過求助才解決了。哎，這編碼之路啊~
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能
這篇文章主要為大家詳細(xì)介紹了vue+spring boot實(shí)現(xiàn)校驗(yàn)碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章介紹了Vue發(fā)送ajax請求的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
插槽（slot）可以說在一個(gè)?Vue?項(xiàng)目里面處處都有它的身影，比如我們使用一些UI?組件庫的時(shí)候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，今天通過本文給大家介紹vue3插槽slot的相關(guān)知識，感興趣的朋友一起看看吧2022-08-08
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue無限滑動(dòng)周選擇日期的組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue生成動(dòng)態(tài)表單功能，這是小編第一次接這個(gè)需求，作為前端開發(fā)的我真的不知如何下手，今天小編通過一段代碼給大家分享vue生成動(dòng)態(tài)表單效果,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實(shí)際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實(shí)際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Vue官方文檔梳理之全局配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個(gè)重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06