SheetJS implements js to obtain and export form data

You can download xlsx.js or xlsx.mini.js, please check the download address for related compatibility

method to read the file
- XLSX.read(data, read_options): //Read data and parse it.
- XLSX.readFile(filename, read_options): //Read the filename file and parse it.
worksheet conversion data format
- XLSX.utils.sheet_to_csv(worksheet): Convert table data to csv format.
- XLSX.utils.sheet_to_txt(worksheet): Convert table data into txt format encoded by utf16.
- XLSX.utils.sheet_to_html(worksheet): convert the table into an html file.
- XLSX.utils.sheet_to_json(worksheet): Convert table data to json format.
table manipulation
- XLSX.utils.aoa_to_sheet(Array[][]): Convert a two-dimensional array into a worksheet object.
- XLSX.utils.json_to_sheet(Object): convert the js object into a worksheet object.
- XLSX.utils.table_to_sheet(HTML): Convert DOM nodes into worksheet objects (usually table elements, tr elements and th elements).
- XLSX.utils.sheet_add_aoa(worksheet, Array[][]): Add the data in the two-dimensional array to the existing worksheet.
- XLSX.utils.sheet_add_json(worksheet, Object): Add the data in the js object to the existing worksheet.
- XLSX.utils.book_append_sheet(workbook, worksheet, sheetname): Add the worksheet object to the workbook and name it sheetname.

Sample code:

Write and export:

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()]
		],'导出')

read file

Read local excel file

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

To read an excel file from the network, the url must be in the same domain, otherwise an error will be reported

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

Select file and get table data

Example:

<!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>

other

Can refer to blog

SheetJS implements js to obtain and export form data

Guess you like