js将json数组导出为excel

程序员阿明

已于 2023-12-04 10:35:27 修改

阅读量1.8k

点赞数 1

文章标签： javascript json 前端

于 2022-07-13 11:15:56 首次发布

本文链接：https://blog.csdn.net/weixin_41463944/article/details/125760006

版权

方式一：
1、定义函数

const jsonData = [
    {
        name:'路人甲',
        phone:'123456789',
        email:'000@123456.com'
    },
    {
        name:'炮灰乙',
        phone:'123456789',
        email:'000@123456.com'
    },
    {
        name:'土匪丙',
        phone:'123456789',
        email:'000@123456.com'
    },
    {
        name:'流氓丁',
        phone:'123456789',
        email:'000@123456.com'
    },
];

/**
 * 导出 json 数据为 Excle 表格
 * @param {json} data 要导出的 json 数据 
 * @param {String} head 表头, 可选 参数示例：'名字,邮箱,电话'
 * @param {*} name 导出的文件名, 可选
 */
function jsonToExcel(data, head, name = '导出的文件名') {
    let str = head ? head + '\n' : '';
    data.forEach(item => {
    	// 拼接json数据, 增加 \t 为了不让表格显示科学计数法或者其他格式
        for(let key in item) {
            str = `${str + item[key] + '\t'},`
        }
        str += '\n'
    });
    console.log(str)
    // encodeURIComponent解决中文乱码
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
     // 通过创建a标签实现
     const link = document.createElement("a");
     link.href = uri;
     // 对下载的文件命名
     link.download =  `${name + '.csv'}`;
     link.click();
}

2、调用

jsonToExcel(jsonData, "姓名,电话,邮箱")

方式二
1、定义函数

function exportJsonToExcel(column, headData, bodyData, sheetName = 'Excle表格') {
    // 组装表头
    let theadHtml = '';
    headData.map(list => {
        let th = ''
        list.map(item => {
            th += `
          <th colspan="${item.colspan || 1}" rowspan="${item.rowspan || 1}">
            ${item.text + '\t'}
          </th>
        `;
        });
        theadHtml += `<tr>${th}</tr>`
    });

    // 组装表体
    let tbodyHtml = ''
    bodyData.map(item => {
        let td = ''
        column.map(n => {
            const val = item[n.key] || ''
            td += `<td style="text-align: center;mso-number-format:'\@';">${val + '\t'}</td>`
        });
        tbodyHtml += `<tr>${td}</tr>`
    });

    // 将table添加到html中，在html中加入excel和sheet元素
    let template = `
      <html lang="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel">
        <head>
          <title></title>
          <xml>
            <x:ExcelWorkbook>
              <x:ExcelWorksheets>
                <x:ExcelWorksheet>
                <x:Name>${sheetName}</x:Name>
                <x:WorksheetOptions>
                  <x:DisplayGridlines/>
                </x:WorksheetOptions>
                </x:ExcelWorksheet>
              </x:ExcelWorksheets>
            </x:ExcelWorkbook>
          </xml>
        </head>
        <body>
          <table>
            <thead>${theadHtml}</thead>
            <tbody>${tbodyHtml}</tbody>
          </table>
        </body>
      </html>
    `;

    // encodeURIComponent 解决中文乱码
    const uri = 'data:text/xlsx;charset=utf-8,\ufeff' + encodeURIComponent(template);

    // 通过创建a标签实现
    const link = document.createElement("a");
    link.href = uri;
    link.download = `${sheetName + '.xlsx'}`; // 设置文件名
    link.click();
}

2、调用函数

// 列
let column = [
  { text: '姓名', key: 'name' },
  { text: '身份证', key: 'personId' },
  { text: '手机号', key: 'phone' },
];

// 表头
let headData = [
  [{ text: '幼儿园一年级', colspan: 3 }],
  [
    { text: '姓名', key: 'name' },
    { text: '身份证', key: 'personId' },
    { text: '手机号', key: 'phone' },
  ]
];

// 表体
let bodyData = [
  {
    name: '张三',
    personId: '12345601',
    phone: '15211112222',
  },
  {
    name: '李四',
    personId: '12345602',
    phone: '15211112222',
  },
  {
    name: '王五',
    personId: '12345603',
    phone: '15211112222',
  },
]

jsonToExcel(column, headData, bodyData, '幼儿园一年级')