一、前言

專案中前端採用的Element UI 框架，遠端資料請求，使用的是axios，後端介面框架採用的asp.net webapi,資料匯出成Excel採用NPOI元件。其業務場景，主要是列表頁(如會員資訊，訂單資訊等)表格資料匯出，如表格資料進行了條件篩選，則需要將條件傳至後端api，篩選資料後，匯出成Excel。

思考過前端匯出的3種方案:

1.使用location.href 開啟介面地址.缺點: 不能傳token至後端api, 無法保證介面的安全性校驗,並且介面只能是get方式請求.

2.採用axios請求介面，先在篩選後的資料服務端生成檔案並儲存，然後返回遠端檔案地址，再採用 location.href開啟檔案地址進行下載. 缺點: 實現複雜，並且每次匯出會在服務端生成檔案，但是又沒有合適的時機再次觸發刪除檔案，會在服務端形成垃圾資料。優點:每次匯出都可以有記錄。

3. 採用axios請求介面，服務端api返回檔案流，前端接收到檔案流後，採用blob物件儲存，並建立成url, 使用a標籤下載. 優點:前端可傳token引數校驗介面安全性，並支援get或post兩種方式。

因其應用場景是匯出Excel檔案之前，必須篩選資料，並需要對介面安全進行校驗，所以第3種方案為最佳選擇。在百度之後，發現目前使用最多的也是第3種方案。

二、Vue + axios 前端處理

1.axios 需在response攔截器裡進行相應的處理(這裡不再介紹axios的使用, 關於axios的用法，具體請檢視Axios中文說明，我們在專案中對axios進行了統一的攔截定義). 需特別注意: response.headers['content-disposition'],預設是獲取不到的,需要對服務端webapi進行配置，請檢視第三點中webapi CORS配置

// respone攔截器
service.interceptors.response.use(
response => {
// blob型別為檔案下載物件，不論是什麼請求方式，直接返回檔案流資料
if (response.config.responseType === 'blob') {
const fileName = decodeURI(
response.headers['content-disposition'].split('filename=')[1]
)
// 返回檔案流內容，以及獲取檔名, response.headers['content-disposition']的獲取, 預設是獲取不到的,需要對服務端webapi進行配置
return Promise.resolve({ data: response.data, fileName: fileName })
}
// 依據後端邏輯實際情況，需要彈窗展示友好錯誤
},
error => {
let resp = error.response
if (resp.data) {
console.log('err:' + decodeURIComponent(resp.data)) // for debug
}
// TODO: 需要依據後端實際情況判斷
return Promise.reject(error)
}
)

2. 點選匯出按鈕，請求api. 需要注意的是介面請求配置的響應型別responseType:'blob' (也可以是配置arrayBuffer) ; 然IE9及以下瀏覽器不支援createObjectURL. 需要特別處理下IE瀏覽器將blob轉換成檔案。

exportExcel () {
let params = {}
let p = this.getQueryParams() // 獲取相應的引數
if (p) params = Object({}, params, p)
axios
.get('介面地址', {
params: params,
responseType: 'blob'
})
.then(res => {
var blob = new Blob([res.data], {
type: 'application/vnd.ms-excel;charset=utf-8'
})
// 針對於IE瀏覽器的處理, 因部分IE瀏覽器不支援createObjectURL
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, res.fileName)
} else {
var downloadElement = document.createElement('a')
var href = window.URL.createObjectURL(blob) // 建立下載的連結
downloadElement.href = href
downloadElement.download = res.fileName // 下載後檔名
document.body.appendChild(downloadElement)
downloadElement.click() // 點選下載
document.body.removeChild(downloadElement) // 下載完成移除元素
window.URL.revokeObjectURL(href) // 釋放掉blob物件
}
})
}

三、WebApi + NPOI 後端處理

1. 需要通過介面引數，查詢資料

為了保持與分頁元件查詢介面一直的引數，採用了get請求方式，方便前端傳參。webapi介面必須返回IHttpActionResult 型別

[HttpGet]
public IHttpActionResult ExportData([FromUri]Pagination pagination, [FromUri] OrderReqDto dto)
{
//取出資料來源
DataTable dt = this.Service.GetMemberPageList(pagination, dto.ConvertToFilter());
if (dt.Rows.Count > 65535)
{
throw new Exception("最大匯出行數為65535行,請按條件篩選資料！");
}
foreach (DataRow row in dt.Rows)
{
var isRealName = row["IsRealName"].ToBool();
row["IsRealName"] = isRealName ? "是" : "否";
}
var model = new ExportModel();
model.Data = JsonConvert.SerializeObject(dt);
model.FileName = "會員資訊";
model.Title = model.FileName;
model.LstCol = new List<ExportDataColumn>();
model.LstCol.Add(new ExportDataColumn() { prop = "FullName", label = "會員名稱" });
model.LstCol.Add(new ExportDataColumn() { prop = "RealName", label = "真實姓名" });
model.LstCol.Add(new ExportDataColumn() { prop = "GradeName", label = "會員等級" });
model.LstCol.Add(new ExportDataColumn() { prop = "Telphone", label = "電話" });
model.LstCol.Add(new ExportDataColumn() { prop = "AreaName", label = "區域" });
model.LstCol.Add(new ExportDataColumn() { prop = "GridName", label = "網格" });
model.LstCol.Add(new ExportDataColumn() { prop = "Address", label = "門牌號" });
model.LstCol.Add(new ExportDataColumn() { prop = "RegTime", label = "註冊時間" });
model.LstCol.Add(new ExportDataColumn() { prop = "Description", label = "備註" });
return ExportDataByFore(model);
}

2.關鍵匯出函式 ExportDataByFore的實現
[HttpGet]
public IHttpActionResult ExportDataByFore(ExportModel dto)
{
var dt = JsonConvert.DeserializeObject<DataTable>(dto.Data);
var fileName = dto.FileName + DateTime.Now.ToString("yyMMddHHmmssfff") + ".xls";
//設定匯出格式
ExcelConfig excelconfig = new ExcelConfig();
excelconfig.Title = dto.Title;
excelconfig.TitleFont = "微軟雅黑";
excelconfig.TitlePoint = 25;
excelconfig.FileName = fileName;
excelconfig.IsAllSizeColumn = true;
//每一列的設定,沒有設定的列資訊，系統將按datatable中的列名匯出
excelconfig.ColumnEntity = new List<ColumnEntity>();
//表頭
foreach (var col in dto.LstCol)
{
excelconfig.ColumnEntity.Add(new ColumnEntity() { Column = col.prop, ExcelColumn = col.label });
}
//呼叫匯出方法
var stream = ExcelHelper.ExportMemoryStream(dt, excelconfig); // 通過NPOI形成將資料繪製成Excel檔案並形成記憶體流
var browser = String.Empty;
if (HttpContext.Current.Request.UserAgent != null)
{
browser = HttpContext.Current.Request.UserAgent.ToUpper();
}
HttpResponseMessage httpResponseMessage = new HttpResponseMessage(HttpStatusCode.OK);
httpResponseMessage.Content = new StreamContent(stream);
httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); // 返回型別必須為檔案流 application/octet-stream
httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") // 設定頭部其他內容特性, 檔名
{
FileName =
browser.Contains("FIREFOX")
? fileName
: HttpUtility.UrlEncode(fileName)
};
return ResponseMessage(httpResponseMessage);
}

3. web api 的CORS配置

採用web api 構建後端介面服務的同學，都知道，介面要解決跨域問題，都需要進行api的 CORS配置, 這裡主要是針對於前端axios的響應response header中獲取不到 content-disposition屬性,進行以下配置

四、總結

以上就是我在實現axios匯出Excel檔案功能時，遇到的一些問題，以及關鍵點進行總結。因為專案涉及到前後端其他業務以及公司架構的一些核心原始碼。要抽離一個完整的demo,比較耗時，所以沒有完整demo展示. 但我已把NPOI相關的操作函式原始碼，整理放至github上。https://github.com/yinboxie/BlogExampleDemo

基於Vue + axios + WebApi + NPOI匯出Excel檔案

一、前言

二、Vue + axios 前端處理

三、WebApi + NPOI 後端處理

四、總結

相關文章