js 纯前端实现.JSON数据和Excel .xls/.xlsx数据互转（react+antd上传下载）

不吃兔兔～

于 2021-03-29 20:38:28 发布

405

文章标签： javascript reactjs

本文链接：https://blog.csdn.net/m0_50851645/article/details/115309993

版权

最近项目上有个需求，需要前端去解析上传的Excel文件，并转成标准的JSON数据，同时还需要下载JSON数据并转换成Excel可打开的数据，今天需求做完，顺手整理下，借此方便自己增强理解～

1.Excel转JSON

//fileList指的是Excel文件的数据流
const file = fileList[0];
const fileReader = new FileReader();
    fileReader.onload = event => {
            try {
               const { result } = event.target;
               // 以二进制流方式读取得到整份excel表格对象
               const workbook = XLSX.read(result, { type: 'binary' });
               // 存储获取到的数据
               let data = {};
               // 遍历每张工作表进行读取（这里默认只读取第一张表）
               for (const sheet in workbook.Sheets) {
                  let tempData = [];
                  // esline-disable-next-line
                  if (workbook.Sheets.hasOwnProperty(sheet)) {
                     // 利用 sheet_to_json 方法将 excel 转成 json 数据
                     data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                  }
               }
               //上传成功,data为上传后的数据
               const newData = JSON.parse(JSON.stringify(data.one))
               newData.map(item => {
                  delete item['__rowNum__']
               })
               // 最终获取到并且格式化后的 json 数据 newData
            } catch (e) {
              console.log('不符合标准JSON格式')
            }
         }
         // 以二进制方式打开文件
         fileReader.readAsBinaryString(file);

format代码：

function (s, c) {
    return s.replace(/{(\w+)}/g, function (m, p) {
      return c[p];
    })
  }

2.JSON转Excel

//jsonData为标准的json数据格式
// fieldName 指定下载文件名

   for (let i = 0; i < jsonData.length; i++) {
      str += '<tr>';
      for (const key in jsonData[i]) {
        // 增加\t为了不让表格显示科学计数法或者其他格式
        str += `<td>${jsonData[i][key] + '\t'}</td>`;
      }
      str += '</tr>';
    }
    // Worksheet名
    const worksheet = 'Sheet1'
    const uri = 'data:application/vnd.ms-excel;base64,';

    // 下载的表格模板数据
    const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
  xmlns:x="urn:schemas-microsoft-com:office:excel" 
  xmlns="http://www.w3.org/TR/REC-html40">
  <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
  <x:Name>${worksheet}</x:Name>
  <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
  </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
  </head><body><table>${str}</table></body></html>`;
    // 输出base64编码
    const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
    const ctx = { worksheet: fieldName };
    // 下载模板
    document.getElementById("dlink").href = uri + base64(format(template, ctx));
    document.getElementById("dlink").download = fieldName;//这里是关键所在,当点击之后,设置a标签的属性,这样就可以更改标签的标题了
    document.getElementById("dlink").click();

如果对你有帮助，请顺手点个赞～前端知识欢迎一起探讨哟～

在这里插入图片描述

不吃兔兔～

关注

0
点赞
踩
2
收藏
打赏
0
评论
js 纯前端实现.JSON数据和Excel .xls/.xlsx数据互转（react+antd上传下载）

最近项目上有个需求，需要前端去解析上传的Excel文件，并转成标准的JSON数据，同时还需要下载JSON数据并转换成Excel可打开的数据，今天需求做完，顺手整理下，借此方便自己增强理解～1.Excel转JSON//fileList指的是Excel文件的数据流const file = fileList[0];const fileReader = new FileReader(); fileReader.onload = event => { try {
复制链接

扫一扫