溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文基于 angular v7.2.7，初次編寫于2019-4-17。
雖然代碼是基于angular 7.2.7，但是語法是基于 angular 4.X 以上均可使用 。在項目開發過程中，我們經常需要跟后端進行文件交互，常見的諸如 圖片上傳，excel 導入與導出等。這里我們只討論關于excel 的導入與導出。
Excel 導入
excel 導入在angular 中其實非常簡單，只需要安裝 xlsx插件 就可以了。
安裝 xlsx 插件
npm install xlsx --save
在component 中導入
import * as XLSX from 'xlsx';
關鍵代碼
import * as XLSX from 'xlsx';
excelData = [];
importExcel(evt: any) {
/* wire up file reader */
const target: DataTransfer = <DataTransfer>(evt.target);
if (target.files.length !== 1) throw new Error('Cannot use multiple files');
const reader: FileReader = new FileReader();
reader.onload = (e: any) => {
/* read workbook */
const bstr: string = e.target.result;
const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
/* grab first sheet */
const wsname: string = wb.SheetNames[0];
const ws: XLSX.WorkSheet = wb.Sheets[wsname];
/* save data */
this.excelData = (XLSX.utils.sheet_to_json(ws, { header: 1 }));
evt.target.value = "" // 清空
};
reader.readAsBinaryString(target.files[0]);
}
Excel 導出
傳統的導出功能我們一般是放在后端實現，由后端生成文件的Url或者文件流給到前端。注：這種是通過瀏覽器的下載功能直接下載的。一般有以下幾種方式實現：
get 請求 + window.open(url)
后端返回一個 文件的url 或者 文件流，這種方式均可以直接下載。 前提是http請求為get 。
post 請求 + <a>標簽
前端代碼：
exportExcel(codeList: string[]) {
return this.http.post(this.ExportExcelByCodesUrl, codeList, {
responseType: 'arraybuffer',//設置響應類型
observe:"response",//返回response header
headers: { 'Content-Type': 'application/json' }
})
.subscribe((response:any)=>{
this.downLoadFile(response, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8")
})
}
/**
* Method is use to download file.
* @param data - Array Buffer data
* @param type - type of the document.
*/
downLoadFile(data: any, type: string) {
var blob = new Blob([data.body], { type: type});
let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob); //創建下載的鏈接
downloadElement.href = href;
let filename = data.headers.get("Download-FileName");//后端返回的自定義header
downloadElement.download = decodeURI(filename);
document.body.appendChild(downloadElement);
downloadElement.click(); //點擊下載
document.body.removeChild(downloadElement); //下載完成移除元素
window.URL.revokeObjectURL(href); //釋放掉blob對象
}
后端代碼:
這里后端是使用的Asp.Net Core 2.1
public IActionResult CreateExcel(string fileName,List<ExportProductModel> list)
{
string[] propertyNames = {""};//業務代碼
string[] propertyNameCn = {""};//業務代碼
MemoryStream ms = ExcelsHelper<ExportProductModel>.ListToExcel(fileName, list, propertyNames, propertyNameCn);
HttpContext.Response.Headers.Add("Download-FileName",WebUtility.UrlEncode(fileName));
return File(ms, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;", WebUtility.UrlEncode(fileName));
}
services.AddCors(options =>
{
options.AddPolicy("AllowAllOrigin", builder =>
{
builder.AllowAnyHeader()
.AllowAnyMethod()
.AllowAnyOrigin()
.AllowCredentials()
.WithExposedHeaders("Download-FileName");
});
});
后端代碼
這里關鍵點是需要設置跨域的響應頭（也就是“Download-FileName”），具體每個語言有自己的實現方式。如果不設置的話，前端無法獲取響應頭。
post 請求 + form 表單 + iframe 標簽（暫無代碼實現）
總結
我在開發過程中有遇到以下幾個問題，折騰了很久：
（1）后端沒有設置跨域的響應頭
（2）前端的http請求 語法書寫錯誤，一直獲取到的是http response body，而非完整的http response。完整寫法參考以上代碼，關鍵是 ： observe:"response"
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
