javascript将JSON数据导出为Excle表格

文章目录

    • 方式一:导出json数据
    • 方式二:直接导出HTML表格

方式一:导出json数据

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

/**
 * 导出 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();
}

运行函数并传入参数如下

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

最后拼接成的str数据如下:

姓名,电话,邮箱
路人甲	,123456789	,000@123456.com	,
炮灰乙	,123456789	,000@123456.com	,
土匪丙	,123456789	,000@123456.com	,
流氓丁	,123456789	,000@123456.com	,

导出后效果如下:
javascript将JSON数据导出为Excle表格_第1张图片

方式二:直接导出HTML表格

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导出excel实例title>
head>
<body>
    <table id="data">
        <tr>
            <th>序号th>
            <th>姓名th>
            <th>年龄th>
        tr>
        <tr>
            <td>1td>
            <td>张三td>
            <td>25td>
        tr>
        <tr>
            <td>2td>
            <td>李四td>
            <td>30td>
        tr>
    table>
 <button onclick = "jsonToExcel('#data')">导出数据button>
body>
<script>
    function jsonToExcel(id, name = '导出的文件名') {
        // 获得表格数据的html标签和文本d;
        var html = ""+document.querySelector(id).outerHTML+"";
        // 创建一个Blob对象,第一个参数是文件的数据,第二个参数是文件类型属性对象
        var blob = new Blob([html],{type:"application/vnd.ms-excel"});
        // 通过创建a标签实现
        const link = document.createElement("a");
        // 利用URL的createObjectURL方法为 a 元素生成 blobURL
        link.href = URL.createObjectURL(blob);
        // 设置文件名
        link.download =  `${name}`;
        link.click();
    }
script>
html>

你可能感兴趣的:(javascript,javascript,json,html)