前端生成与读取Excel的两种框架使用方法

版权声明:原创文章,如想转载,请注明原文网址,注明出处;否则,禁止转载;谢谢配合! https://blog.csdn.net/c_kite/article/details/82899600

xlsx

xlsx github地址 https://github.com/SheetJS/js-xlsx

安装依赖:

1. <script lang="javascript" src="dist/xlsx.full.min.js"></script> // 此文件可以在上面的github地址找到
2. npm install xlsx

使用方法:

导入Excel

// 例子: 本例代码出处 https://github.com/SheetJS/js-xlsx/tree/master/demos/react  基于官方例子做了些许修改
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<label for="myinput">上传文件</label>
<input accept=".xlsx,.xls" id="myinput" type="file" />

<script src="./xlsx.full.min.js"></script>
<script>

  // 生成一个列对象组成的数组
  function make_cols(refstr) {
    let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1;
    for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i}
    return o;
  };

  function handleExcelFileChange(file) {
    const files = file.target.files;
    if(files && files[0]) {
      const reader = new FileReader();
      const rABS = !!reader.readAsBinaryString;
      reader.onload = (e) => {
          const bstr = e.target.result;
          const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'});
          /* Get first worksheet */
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          /* Convert array of arrays */
          const data = XLSX.utils.sheet_to_json(ws);
          // 上面这个sheet_to_json可配置的参数 {header:1, raw:true, cellDates:true}

          console.log(ws, data, make_cols(ws['!ref']))
      };
      if(rABS) reader.readAsBinaryString(files[0]); else reader.readAsArrayBuffer(files[0]);
    }
  }

  const input = document.getElementById('myinput');
  input.addEventListener('change', handleExcelFileChange);

</script>
  
</body>
</html>

导出Excel

// 例子: 本例代码出处 https://github.com/SheetJS/js-xlsx/tree/master/demos/react  基于官方例子做了些许修改

	function exportFile() {
		/* convert state to workbook */
		const ws = XLSX.utils.aoa_to_sheet([[1,2,3], [1,2,3]]);
		const wb = XLSX.utils.book_new();
		XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
		/* generate XLSX file and send to client */
		XLSX.writeFile(wb, "sheetjs.xlsx")
	};

js-export-excel

安装依赖

https://github.com/cuikangjie/js-export-excel

npm install js-export-excel

导出excel

// 本例代码出自https://coding.cuikangjie.com/content/26/%E7%BA%AFJS%E5%AF%BC%E5%87%BAexcel%EF%BC%88%E6%94%AF%E6%8C%81%E4%B8%AD%E6%96%87%EF%BC%89
const ExportJsonExcel = require('js-export-excel')

var option={};

option.fileName = 'excel'
option.datas=[
  {
    sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}],
    sheetName:'sheet',
    sheetFilter:['two','one'],
    sheetHeader:['第一列','第二列'],
    columnWidths: [20, 20]
  },
  {
    sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}]
  }
];

var toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存

猜你喜欢

转载自blog.csdn.net/c_kite/article/details/82899600
今日推荐