文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS如何实现将数据导出到Excel

2023-07-02 00:48

关注

今天小编给大家分享一下JS如何实现将数据导出到Excel的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

方法一:

将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下:

<html><head>    <p >使用table标签方式将json导出xls文件</p>    <button onclick='tableToExcel()'>导出</button></head><body>    <script>     const tableToExcel = () => {        // 要导出的json数据        const jsonData = [            {                name:'路人甲',                phone:'123456',                email:'123@123456.com'            },            {                name:'炮灰乙',                phone:'123456',                email:'123@123456.com'            },            {                name:'土匪丙',                phone:'123456',                email:'123@123456.com'            },            {                name:'流氓丁',                phone:'123456',                email:'123@123456.com'            },        ]        // 列        let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';        // 循环遍历,每行加入tr标签,每个单元格加td标签        for(let i = 0 ; i < jsonData.length ; i++ ){            str+='<tr>';            for(const key in jsonData[i]){                // 增加为了不让表格显示科学计数法或者其他格式                str+=`<td>${ jsonData[i][key] + ''}</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>`;        // 下载模板        window.location.href = uri + base64(template);    };     // 输出base64编码    const base64 = s => window.btoa(unescape(encodeURIComponent(s)));    </script></body></html>

导出的文件后缀是xls,用office打开的时候不太友好。

然后,我发现了第二个方法

方法二

通过将json遍历进行字符串拼接,将字符串输出到csv文件,代码如下

<html><head>    <p >使用a标签方式将json导出csv文件</p>    <button onclick='tableToExcel()'>导出</button></head><body>    <script>    const tableToExcel = () => {        // 要导出的json数据        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'            },        ];        // 列,逗号隔开,每一个逗号就是隔开一个单元格        let str = `姓名,电话,邮箱`;        // 增加为了不让表格显示科学计数法或者其他格式        for(let i = 0 ; i < jsonData.length ; i++ ){            for(const key in jsonData[i]){                str+=`${jsonData[i][key] + ''},`;                }            str+='';        }        // encodeURIComponent解决中文乱码        const uri = 'data:text/csv;charset=utf-8,ufeff' + encodeURIComponent(str);        // 通过创建a标签实现        const link = document.createElement("a");        link.href = uri;        // 对下载的文件命名        link.download =  "json数据表.csv";        link.click();    }    </script></body></html>

以上就是“JS如何实现将数据导出到Excel”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯