JavaScript实现导入导出excel的示例代码【java基础】

目录

• Excel导入
• html代码
• js代码
• Excel导出
• html代码
• js代码

<button style={{ color: "#1890ff", fontSize: "14px", cursor: "pointer" }} onClick={() => { upFile(); }} > 
　　导入
</button> 
<input id="upFile" type="file" style={{ display: "none" }} accept=".xlsx, .xls" onChange={upChange} />

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);
      }
    };
  };

<Button onClick={() => ecportExcel()} > 导出 </Button>

const jsonData = [
  { name: "张三", age: 12, gender: "男" },
  { name: "李四", age: 14, gender: "男" },
  { name: "王五", age: 15, gender: "女" },
]
// 前端实现导出
const ecportExcel = (jsonData: any) => {
  // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
  let str = `序号,名称,年龄,性别
`;
  const tableData: any = []
  jsonData.forEach((el: any, index: number) => {
    tableData.push({
      index: index + 1,
      name: el?.name || "",
      age: el?.age || "",
      gender: el?.gender || "",
    })
  });
  // 增加	为了不让表格显示科学计数法或者其他格式
  for (let i = 0; i < tableData.length; i++) { // eslint-disable-line
    for (const key in tableData[i]) { // eslint-disable-line
      str += `${`${tableData[i][key]}	`},`;
    }
    str += "
";
  }
  // 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();
}