導入 並讀取 excel 表格數據 並作為 json 輸出
https://www.npmjs.com/package/xlsx
// html
<button onClick={() => {$("#importFile").trigger("click")}}>導入</button>
{/* 不顯示在界面中的部分,即備用項 */}
<input id="importFile" type='file' accept='.xlsx, .xls' onChange={this.onHandelImport} />
// js
import * as XLSX from 'xlsx';
onHandelImport(file) {
document.getElementById("cx_loading").style.display = 'block';
// 獲取上傳的文件對象
const { files } = file.target;
// 通過FileReader對象讀取文件
const fileReader = new FileReader();
fileReader.onload = event => {
try {
const { result } = event.target;
// 以二進制流方式讀取得到整份excel表格對象
const workbook = XLSX.read(result, { type: 'binary' });
let data = []; // 存儲獲取到的數據
// 遍歷每張工作表進行讀取(這里默認只讀取第一張表)
for (const sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法將 excel 轉成 json 數據
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一張表,就取消注釋這行
}
}
document.getElementById("importFile").value = "";
// regien *** 在這里寫讀取后的代碼 *********
// 打印數據查看
console.log(data)
} catch (e) {
message.error(e.message);
// 這里可以拋出文件類型錯誤不正確的相關提示
document.getElementById("importFile").value = "";
console.log(e);
}
};
// 以二進制方式打開文件
fileReader.readAsBinaryString(files[0]);
}
導出為 excel 表格
https://www.npmjs.com/package/js-export-excel
import ExportJsonExcel from 'js-export-excel';
const data = {
keys: { '啊': 'a', '泵': 'b', '次': 'c', '嘚': 'd' },
rows: [{ a: 1, b: 2, c: 3, d: 4 }, { a: 4, b: 3, c: 2, d: 1 }, { a: 'a', b: 'b', c: 'c', d: 'd' }]
}
let dataTable = []; //excel文件中的數據內容
let option = {}; //option代表的就是excel文件
dataTable = data.rows; //數據源
option.fileName = "下載文件"; //excel文件名稱
option.datas = [
{
sheetData: dataTable, //excel文件中的數據源
sheetName: 'Sheet1', //excel文件中sheet頁名稱
sheetFilter: Object.values(data.keys), //excel文件中需顯示的列數據
sheetHeader: Object.keys(data.keys), //excel文件中每列的表頭名稱
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下載excel文件
React->antd->table 限定款導出代碼