JS 读取excel文件内容 和 将json数据导出excel文件

一、实现将json数据导出为excel文件

1、通过原生js实现

核心方法：

function JSONToExcelConvertor(JSONData, FileName, title, filter) {
      if (!JSONData)
        return;
      //转化json为object
      var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

      var excel = "";//设置表头  var row ="";if(title){//使用标题项for(var i in title){
          row +="';}}else{//不使用标题项for(var i in arrData[0]){
          row +="';}}

      excel += row +"";//设置数据  for(var i =0; i < arrData.length; i++){var row ="";for(var index in arrData[i]){//判断是否有过滤行if(filter){if(filter.indexOf(index)==-1){var value = arrData[i][index]==null?"": arrData[i][index];
              row +='';}}else{var value = arrData[i][index]==null?"": arrData[i][index];
            row +="";}}

        excel += row +"";}

      excel +="


      
       


        
        
           
" + title[i] + '
        

      
       
        
           
" + i + '
        
       

      
         
         


          
          
            
                
                    
' + value + '
            
          
           
                  
" + value + "
          
         
       
";

      var excelFile = "";
      excelFile += '';
      excelFile += ';
      excelFile += '; charset=UTF-8">';
      excelFile += "";
      excelFile += "";
      excelFile += "";
      excelFile += "";
      excelFile += excel;
      excelFile += "";
      excelFile += "";

      var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

      var link = document.createElement("a");
      link.href = uri;

      link.style = "visibility:hidden";
      link.download = FileName + ".xls";

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

JSONData：json数据
FileName：导出的文件名
title： 列的表头标题
filter： 要过滤的数据列

方法调用：

let excelData = [
 { "c1": "990019", "c2": "张三1", "c3": "女", },
  { "c1": "140007", "c2": "张三2", "c3": "女", },
]
JSONToExcelConvertor(excelData, "test", ['ID（编号）', 'NAME（名称）'], ['c3']);
1
2
3
4
5

2、通过xlsx.js实现

安装

方式一：命令行下载

npm install xlsx
1

方式二：github手动下载
https://github.com/SheetJS/sheetjs/tree/github/dist

<script type="text/javascript" src='./xlsx.full.min.js'>script>
1

使用

实现核心方法

/**
 * 单个sheet下载
 * @param {object[]} json json
 * @param {object} tableTitle excel表头名称
 * @param {string} fileName 文件名称
 * @param {object} wbConfig 扩展
 * @param {object} woptsConfig 扩展
 */
function json2Excel(json,tableTitle,fileName,wbConfig={},woptsConfig={}) {
    let wopts = {
        bookType: 'xlsx',
        bookSST: false, 
        type: 'binary'
    };
    let workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
    };
    json = [tableTitle,...json];
    workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(json,{skipHeader:true}); // skipHeader 忽略原来的表头

    //3、XLSX.write() 开始编写Excel表格
    //4、changeData() 将数据处理成需要输出的格式
    saveAs(new Blob([changeData(XLSX.write({...workBook,...wbConfig}, {...wopts,...woptsConfig}))], {type: 'application/octet-stream'}),fileName)
}
/**
 * 多个sheet下载
 * @param {object} data 
 * @param data.Sheet1.title {}
 * @param data.Sheet1.data []
 * @param {string} fileName 文件名称
 * data格式
 * {
    'sheet1':{
        title:{name:'名字',age:'年龄'},
        json:[{name:'sd',age:1999}]
    },
    'sheet2':{
        title:{name:'名字',age:'年龄'},
        json:[{name:'z',age:195}]
    },
    }
 */

function json2ExcelMultiSheet(data,fileName){
    let wopts = {
        bookType: 'xlsx',
        bookSST: false, 
        type: 'binary'
    };
    let workBook = {
        SheetNames: [],
        Sheets: {},
        Props: {}
    };
    let keys = Object.keys(data);
    keys.forEach(key=>{
        let json = [data[key].title,...data[key].json];
        workBook.SheetNames.push(key);
        workBook.Sheets[key] = XLSX.utils.json_to_sheet(json,{skipHeader:true}); // skipHeader 忽略原来的表头
    })
    // XLSX.write() 开始编写Excel表格
    //changeData() 将数据处理成需要输出的格式
    saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}),fileName)
}
function changeData(s) {

//如果存在ArrayBuffer对象(es6) 最好采用该对象
    if (typeof ArrayBuffer !== 'undefined') {
        
        //1、创建一个字节长度为s.length的内存区域
        let buf = new ArrayBuffer(s.length);
        
        //2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
        let view = new Uint8Array(buf);
        
        //3、返回指定位置的字符的Unicode编码
        for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;

    } else {
        let buf = new Array(s.length);
        for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
}
function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式 

    let tmpa = document.createElement("a");

    tmpa.download = fileName+'.xlsx' || "下载.xlsx";
    tmpa.href = URL.createObjectURL(obj); //绑定a标签
    tmpa.click(); //模拟点击实现下载

    setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
    }, 100);

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

方法调用：
这里只演示单个sheet下载

let excelData = [
    { "c1": "990019", "c2": "张三1", "c3": "女", },
    { "c1": "140007", "c2": "张三2", "c3": "女", },
]
json2Excel(excelData, { "c1": "ID（编号）", "c2": "NAME（名称）", "c3": "c3", }, "test")
1
2
3
4
5

二、JS读取excel文件内容

这里使用了上面说的xlsx.js库，所以需先安装xlsx

先通过本地导入要读取的excel文件

<div id="import">
	<p>导入模版p>
    <p> 请选择要选择导入的模版文件p>
    <input type="file" onchange="importFile(this)">
    <div id="demo">div>
div>
1
2
3
4
5
6

将excel解析为json后写入元素

var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function importFile(obj) {//导入
    if (!obj.files) {
        return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        if (rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {

                type: 'binary'//以二进制的方式读取
            });
        }

        console.log('wb: ', wb);
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据
        // XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { raw: false }); //以字符串形式读取。
        console.log('XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]): ', XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
        document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));

    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
}


function fixdata(data) { //文件流转BinaryString
    var o = "",
        l = 0,
        w = 10240;
    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

完美，成功解析：

---

---

参考资料：

https://www.npmjs.com/package/xlsx

https://blog.csdn.net/weixin_43660626/article/details/106780365