Vue結合後台詳解匯入匯出Excel問題

vue完整前後臺專案介紹

最近vue專案中用到了匯入匯出功能，在網上搜尋了一番之後，決定採用blob方式，這也是大家推薦的一種的方式，特此做下記錄。

匯出excel功能

這裡不談別人怎麼實現的，我是從後台生成了excel流檔案返回給前端的。

下面具體看一下後台的**：

/**
* 批量匯出使用者
("使用者列表"
,response));
}        book.
close()
;}catch
(exception e)
}

/** * @param excelname * 要生成的檔案名字

對於第乙個函式exportuser來說，主要是根據傳回來的條件查詢資料庫並生成相應的excel**，之後book.write(generateresponseexcel(「使用者列表」,response)); 這行**呼叫第二個函式generateresponseexcel來生成流檔案以及處理返回的response。

這裡需要注意的地方就兩個：

response.
setcontenttype()
;response.
setheader
("content-disposition"
,"attachment; filename="
+ excelname +
".xlsx"
);

上面就是後台的全部**了，接下來看一下前端的**：

axios(,
responsetype: 'blob'
}).then((res) => 
link.setattribute('download', '使用者_' + num + '.xlsx')
link.click()
document.body.removechild(link)
}).catch(error => )
console.log(error)
})

這裡為了方便做記錄，我是直接在頁面中使用axios傳送了個post請求。

仔細看axios請求加了個responsetype: 'blob'配置，這是很重要的

可以看一下請求成功之後返回的資料：

可以看到請求返回了乙個blob物件，你如果沒有正確的加上responsetype: 'blob』這個引數，返回的就不是個blob物件，而是字串了。

const link = document.createelement('a')
link.style.display = 'none'
link.href = url.createobjecturl(blob);
let num = ''
for(let i=0;i < 10;i++)
link.setattribute('download', '使用者_' + num + '.xlsx')
link.click()
document.body.removechild(link)

其餘的看看就行了。

以上就是全部的vue匯出excel前後端**了。

匯入excel功能

其實對於這個匯入excel沒有什麼好說的，就和你沒採用前後分離時使用springmvc匯入excel**一樣。vue前端匯入excel**和vue上傳的**沒有區別，就是將excel檔案傳到後台，之後就是後台處理檔案的邏輯了，這個就不具體寫了，因為和以前沒區別。

Vue結合後台詳解匯入匯出Excel問題

使用GridView將資料匯入或匯出Excel中

redis 匯出匯入詳解

redis 匯出匯入詳解

Vue結合後台詳解匯入匯出Excel問題

使用GridView將資料匯入或匯出Excel中

redis 匯出 匯入 詳解

redis 匯出 匯入 詳解

相關推薦

redis 匯出匯入詳解

redis 匯出匯入詳解