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

}

欢迎各位大大关注！！！

巴特西

js导入excel&导出excel

Excel导入

Excel导出

最新文章

热门文章