React中使用JS导入导出Excel

导入

参考文章

需引入xlsx.js库

<Upload
  name='file'
  beforeUpload={(file) => {
    const f = file;
    const reader = new FileReader();
    reader.onload = (e) => {
      const datas = e.target.result;
      const workbook = XLSX.read(datas, {type: 'binary'});
      const first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });
      
      console.log(jsonArr); // 数据
    };
    reader.readAsBinaryString(f);
    return false;
  }}
>
  <button>导入表格</button>
</Upload>

下载

参考文章

<button onClick={() => {
  let fileName = '议题督办导入模板'; // 文件名
  let suffix = 'xlsx'; // 后缀名
  let columns = ['姓名', '年龄', '地址']; // 列名
  let dataSource = [['姓名1', '年龄1', '地址1'], ['姓名2', '年龄2', '地址2'], ...]; // 数据：二未数组，每个子数组代表一行

  let dataType = "\uFEFF"; //解决乱码问题
  dataType += columns.join(',');  //添加表格的头
  dataType += '\n'; // 以上是导出的Excel文件头部

  // 从dataSource中取出数据存入数据源（dataType）
  dataSource.map(item => dataType += `${item.join(',')}\n`); 

  // 使用Blob，获得二进制实例
  const csvData = new Blob([dataType], {type: 'text/csv'});

  // 创建a标签
  const _a = document.createElement('a');
  /**
  * URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL
  * 这里相当于为a标签添加了一个下载地址
  */
  _a.href = URL.createObjectURL(csvData);
  // 该a标签点击后会打开新的标签页，人机交互会更加舒适
  _a.target = '_blank';
  // 为a标签规定被下载的超链接目标
  _a.download = `${fileName}.${suffix}`;
  // 将这个制作好的a标签置入body，并在点击之后移除，降低外界感知
  document.body.appendChild(_a);
  _a.click();
  document.body.removeChild(_a);
}}>下载模板</button>