前端xlsx导入与导出

最近在做项目中，后端偷懒不做导出功能，让我前端实现，所以在这里记录下前端导出功能，顺便补上导入功能。

项目时用vue开发的 所以在此我把导入导出功能封装到一个mixin中，需要用到直接引入调用方法一步到胃😝

首先引入xlsx

 npm i xlsx

之后写一个mixin专门处理导入导出功能 - 代码如下： 

/**
 *  导出的Mixin方法等...
 */
import XLSX from "xlsx";

// 定义一个mixin对象
const exportMixin = {
    methods: {
		/**
		 * 导出 Excel 表
		 * 	@param {array} title 	文件名称
		 *  @param {array} data 	二维数组 [0]表示表头
		 * data 例子：
		 * 	[
				['表头1', '表头2', '表头3'],
				['内容1', '内容2', '内容3'],
				['内容11', '内容22', '内容33'],
			]
		 * */
		handleExportExcel(data, title) {
			const worksheet = XLSX.utils.aoa_to_sheet(data);
			const workbook = XLSX.utils.book_new();
			XLSX.utils.book_append_sheet(workbook, worksheet, title);
			XLSX.writeFile(workbook, `${title}.xlsx`);
		},

		/**
		 * 获取导入xlsx表格的数据
		 * */
		getImportExcelData(file) {
			return new Promise(resolve => {
				// 判断格式
				const type = file.name.substring(file.name.lastIndexOf(".") + 1);
				if(type !== 'xlsx' && type !== 'xls') {
					resolve(null);
				}

				const fileReader = new FileReader();
				fileReader.onload = event => {
					try {
						const data = event.target.result;
						const workbook = XLSX.read(data, { type: "binary" });
						// 取第一张表
						const xlsxData = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
						// 把解析出来的Excel数据返回
						resolve(xlsxData);
					} catch (e) {
						resolve(null);
					}
				}
				fileReader.readAsBinaryString(file);
			});
		},
	}
}


// 导出...
export default exportMixin;