javascript 前端excel操作數據導入導出,讀取、操作、重組


導入 並讀取 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 限定款導出代碼


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM