• JSON与excel之间的相互转化(Vue)


    这几天项目中有个需求,是对数据进行批量操作

    上传时候需要把excel转为json发给后端,而在导出时需要将json转为excel文件

    我是借用了xlsx这个库来完成的,在此记录一下

    npm i xlsx安装相关依赖

    设置一个input用于

     <input type="file"
               name="fileUploader"
               id="fileUploader"
               accept=".xls,.xlsx"
            @change="_toJSON"/>
    

    引入对应的框架

    import xlsx from 'xlsx'

    excel转json

    _toJson(){
        let file = e.target.files[0]
          let reader = new FileReader()
          reader.onload = (event) => {
            console.log(event);
            let data = event.target.result;
            const workbook = XLSX.read(data, {
              type: 'binary'
            });
            let resultArray = []
            workbook.SheetNames.forEach(function (sheetName) {
              console.log('workbook.Sheets[sheetName]', workbook.Sheets[sheetName]);
              const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1 });
              console.log('data', data);
              let mainData = data.slice(1)
              if (mainData.length > 0) {
                for (let row = 0; row < mainData.length; row++) {
                  let rowData = {}
                  for (let col = 0; col < data[0].length; col++) {
                    rowData[data[0][col]] = mainData[row][col] || ''
                  }
                  resultArray.push(rowData)
                }
              } else {
                alert('至少需要一行有效数据')
              }
            })
            console.log('resultArray', resultArray);
    
          }
          reader.readAsBinaryString(file);
    }
    

    json转excel

    _toExcel () {
          let data = [{ "业务政策": 1, "产品名称": 2, "证件号码": 5 }, { "产品名称": 2 }]
          const ws = XLSX.utils.json_to_sheet(data);
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, "People");
          XLSX.writeFile(wb, "sheetjs.xlsx");
        }
    
  • 相关阅读:
    jQuery动态表格插件 AppendGrid
    JavaScript:用JS实现加载页面前弹出模态框
    JavaScript(select onchange)的网页跳转的简单实现
    jQuery DataTables的简单实现
    JavaScript 设计模式之命令模式
    JavaScript 设计模式之代理模式
    JavaScript 设计模式之工厂模式
    JavaScript 设计模式之建造者模式
    集群服务器消息通讯办法
    游戏服务器端开发的基本大纲
  • 原文地址:https://www.cnblogs.com/axu1997/p/14813070.html
Copyright © 2020-2023  润新知