SheetJS实现js获取、导出表格数据

仲孙翔飞

2023-12-01

下载xlsx.js或者xlsx.mini.js都可以，相关兼容性请在下载地址查看

读取文件的方法
- XLSX.read(data, read_options)：//读取data并解析。
- XLSX.readFile(filename, read_options)：//读取filename文件并解析。
worksheet转换数据格式
- XLSX.utils.sheet_to_csv(worksheet)：将表格数据转化为csv格式。
- XLSX.utils.sheet_to_txt(worksheet)：将表格数据转化为生成由utf16编码的txt格式。
- XLSX.utils.sheet_to_html(worksheet)：将表格转化为html文件。
- XLSX.utils.sheet_to_json(worksheet): 将表格数据转化为json格式。
表格操作
- XLSX.utils.aoa_to_sheet(Array[][])：将二维数组转化为worksheet对象。
- XLSX.utils.json_to_sheet(Object)：将js对象转化为worksheet对象。
- XLSX.utils.table_to_sheet(HTML)：将DOM节点转化为worksheet对象（一般为table元素、tr元素和th元素）。
- XLSX.utils.sheet_add_aoa(worksheet, Array[][])：将二维数组中的数据添加到已有的worksheet中。
- XLSX.utils.sheet_add_json(worksheet, Object)：将js对象中的数据添加到已有的worksheet中。
- XLSX.utils.book_append_sheet(workbook, worksheet, sheetname)：将worksheet对象添加到workbook中, 并命名为sheetname。

示例代码:

写入和导出:

function exportFile(data,filName){
			var aoa =data ;
			// 将js数组转换成工作表
			var sheet = XLSX.utils.aoa_to_sheet(aoa);
			sheet['!merges'] = [
				// 横向合并，范围是第一行的第一列到第一行的第三列
				{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } },
				// // 纵向合并，范围是第1列的行1到行2
				// // { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
			];
			// 生成工作簿并添加工作表
			var workbook=XLSX.utils.book_new();
			XLSX.utils.book_append_sheet(workbook, sheet, 'sheet1')
			// 保存文件
			XLSX.writeFile(workbook,filName+'.xlsx')
		}

    // 使用:
		exportFile([
				// 如果需要合并单元格，需要用null占位
				['主要信息', null, null, '其它信息'],
				['姓名', '性别', '年龄', '注册时间'],
				['张三', '男', 18, new Date()],
				['李四', '女', 22, new Date()]
		],'导出')

读取文件

读取本地excel文件

function readWorkbookFromLocalFile(file, callback) {
		var reader = new FileReader();
		reader.onload = function(e) {
			var data = e.target.result;
			var workbook = XLSX.read(data, {type: 'binary'});
			if(callback) callback(workbook);
		};
		reader.readAsBinaryString(file);
	}

从网络上读取某个excel文件，url必须同域，否则报错

function readWorkbookFromRemoteFile(url, callback) {
		var xhr = new XMLHttpRequest();
		xhr.open('get', url, true);
		xhr.responseType = 'arraybuffer';
		xhr.onload = function(e) {
			if(xhr.status == 200) {
				var data = new Uint8Array(xhr.response)
				var workbook = XLSX.read(data, {type: 'array'});
				if(callback) callback(workbook);
			}
		};
		xhr.send();
	}

选择文件并获取表格数据

实例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="xlsx.js"></script>
  </head>
  <body>
    <input  type="file" onchange="fileChange(this)"/>
  </body>
  <script>
    // 获取并转换本地文件
    function fileChange(that){
      readWorkbookFromLocalFile(that.files[0],res=>{
        var SheetObject={}
        Object.keys(res.Sheets).forEach(item=>{
          SheetObject[item]=XLSX.utils.sheet_to_json(res.Sheets[item])
        })
        // SheetObject：获取的数据
        // XLSX.utils.json_to_sheet(SheetObject.Sheet1)：再次转换为工作表
        console.log(SheetObject,XLSX.utils.json_to_sheet(SheetObject.Sheet1))
        
      })
    }
    
    // 读取本地excel文件
    function readWorkbookFromLocalFile(file, callback) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, {type: 'binary'});
        if(callback) callback(workbook);
      };
      reader.readAsBinaryString(file);
    }
  </script>
</html>

其他

可参考博客

SheetJS实现js获取、导出表格数据

相关阅读

相关文章

相关问答

相关文档