js導入excel&導出excel
Excel導入
html程式碼
<button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} >
導入
</button>
<input id="upFile" type="file" style={{ display: 'none' }} accept=".xlsx, .xls" onChange={upChange} />
js程式碼
import XLSX from 'xlsx';
const upFile = () => {
const upSdaFile: any = document.getElementById('upFile');
upSdaFile.click();
};
const upChange = (e) => {
const file = e.target.files[0]; // 獲取第一個文件
const reader = new FileReader();
reader.readAsBinaryString(file); // 讀取這個文件
reader.onload = function (event) {
try {
const { result }: any = event.target;
const xlsxData = XLSX.read(result, { type: 'binary' }); // 讀取xlsx
let col: any = null;
// @ts-ignore
for (const n in xlsxData.Sheets) { // eslint-disable-line
// 這裡是多張表格 所以寫一個循環
col = XLSX.utils.sheet_to_json(xlsxData.Sheets[n], { header: 1, defval: '', blankbook: true }); // 解析為數組
}
console.log('col', col);
} catch (err) {
console.log('err', err);
}
};
};
注意不要引用 0.18.幾的xlsx,和其他文件衝突報錯找不到,要安裝 “xlsx”: “0.17.0”
Excel導出
html程式碼
<Button onClick={() => ecportExcel()} > 導出 </Button>
js程式碼
const jsonData = [ { name: '張三', age: 12, gender: '男' }, { name: '李四', age: 14, gender: '男' }, { name: '王五', age: 15, gender: '女' }, ] // 前端實現導出 const ecportExcel = (jsonData: any) => { // 列標題,逗號隔開,每一個逗號就是隔開一個單元格 let str = `序號,名稱,年齡,性別\n`; const tableData: any = [] jsonData.forEach((el: any, index: number) => { tableData.push({ index: index + 1, name: el?.name || '', age: el?.age || '', gender: el?.gender || '', }) }); // 增加\t為了不讓表格顯示科學計數法或者其他格式 for (let i = 0; i < tableData.length; i++) { // eslint-disable-line for (const key in tableData[i]) { // eslint-disable-line str += `${`${tableData[i][key]}\t`},`; } str += '\n'; } // encodeURIComponent解決中文亂碼 const uri = `data:text/xlsx;charset=utf-8,\ufeff${encodeURIComponent(str)}`; // 通過創建a標籤實現 const link = document.createElement("a"); link.href = uri; // 對下載的文件命名 link.download = "企業承諾匯總.xlsx"; link.click(); }
歡迎各位大大關注!!!