JS实现将数据导出到Excel的方法详解

修改之前项目代码的时候，发现前人导出excel是用纯javascript实现的。并没有调用后台接口。

之前从来没这么用过，记录一下。以备不时之需。

方法一：

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

<html>
<head>
    <p style="font-size: 20px;color: red;">使用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 style="font-size: 20px;color: red;">使用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的方法详解的文章就介绍到这了,更多相关JS数据导出内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript 导出数据到Excel(处理table中的元素)

    做法: 修改Input的outerHTML; 具体例子: 复制代码 代码如下: function resetInput() { var controls = document.getElementsByTagName('input'); for(var i=0; i<controls.length; i++){ if(controls[i].type=='text') { if(controls[i].value =="") { controls[i].outerHTML=&qu

  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js实现数据导出为EXCEL（支持大量数据导出）

    数据导出为excel是前端比较常用的功能.笔者近期在网上收集汇总了几种常用的方法,供大家使用. 1.ActiveXObject("Excel.Application") 这种方法只能在IE下使用. 优点:参照VBA控制excel对象.(代码不会的可以录制宏) 缺点:引用cell对象太慢,上万行数据导出时间超过2分钟 2.以Table方式导出为html文件. 3.以CSV方式导出. 使用中发现如果数据较多,上述第2.3中方法会失效,因此又整理了第4种方法 toLargerCSV. 第4种

  • 通过Javascript将数据导出到外部Excel文档的函数代码

    复制代码 代码如下: function AutomateExcel() { try { //Start Excel and get Application object. var oXL; try { oXL = new ActiveXObject("Excel.Application"); } catch(e) { alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel," + "那么请调整IE的安全级别.\n\n具体操作:\

  • JS实现将数据导出到Excel的方法详解

    修改之前项目代码的时候,发现前人导出excel是用纯javascript实现的.并没有调用后台接口. 之前从来没这么用过,记录一下.以备不时之需. 方法一: 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下: <html> <head>     <p style="font-size: 20px;color: red;&quo

  • vue element实现将表格单行数据导出为excel格式流程详解

    由于业务内容的需要,我们有时候需要将表格中的单行数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击单行导出按钮,导出数据为excel表格 如下图: 具体操作步骤如下: 1.下载按照依赖 npm install -D script-loader 2.在src文件夹的目录下方创建两个js文件 (1):Blob.js (2):Export2Excel.js 如下图: (Blob.js) (function (v

  • 在Vue里如何把网页的数据导出到Excel的方法

    前言: 在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表.员工信息.交易记录.考勤打卡记录-等等需求,本文将对此做探讨. 开始前补充: 网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花八门,组件的功能也很有限,不一定真能完全符合自己的业务需求,找相应的API也很麻烦,存在不太敢用,不会用等问题,那么本文将教你如何自己封装,如何自己自定义相关功能,如何自定义Excel的样式 ,尤其是导出excel后自定义样式,这在一

  • PHP将Excel导入数据库及数据库数据导出至Excel的方法

    本文实例讲述了PHP将Excel导入数据库及数据库数据导出至Excel的方法.分享给大家供大家参考.具体实现方法如下: 一.导入 导入需要使用能读取Excel的组件,网上也有比较好的组件,这里分享我使用的:下载  提取码:vxyn.(注意两个文件有引用关系) <?php //传入要导入的Excel的文件名 function import_to_DB($filename) { require_once'reader.php'; $data = new Spreadsheet_Excel_Reade

  • 纯JS将table表格导出到excel的方法

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">IE导出Excel方法</button> <button type="button" onclick="method5('tableExcel')">Chrome导出Excel</button> </di

  • Java使用POI实现导出Excel的方法详解

    目录 一.前景 二.概念 2.1. 简介 2.2.Excel版本和相关对象 2.3.WorkBook 2.4.POI依赖 三.POI - 写 3.1.代码示例 3.2. 性能对比 3.3. 测试rowAccessWindowSize 3.4. 导出Excel样式设置 四.POI - 读 4.1.代码示例 4.2.读取不同的数据类型 4.3.读取公式 五.POI - 遇到的坑 一.前景 在项目开发中往往需要使用到Excel的导入和导出,导入就是从Excel中导入到DB中,而导出就是从DB中查询数据

  • Python实现大数据收集至excel的思路详解

    一.在工程目录中新建一个excel文件 二.使用python脚本程序将目标excel文件中的列头写入,本文省略该部分的code展示,可自行网上查询 三.以下code内容为:实现从接口获取到的数据值写入excel的整体步骤 1.整体思路: (1).根据每日调取接口的日期来作为excel文件中:列名为"收集日期"的值 (2).程序默认是每天会定时调取接口并获取接口的返回值并写入excel中(我使用的定时任务是:linux下的contab) (3).针对接口异常未正确返回数据时,使用特殊符号

  • JS合并两个数组的3种方法详解

    这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: 1.concat js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果. var c = a.concat(b); //c=[1,2,3,4,5,6]

  • C#实现将PDF转为Excel的方法详解

    C#实现将PDF转为Excel的方法详解

    目录 dll引用方法 方法1 方法2 PDF转Excel C# VB.NET 通常,PDF格式的文档能支持的编辑功能不如office文档多,针对PDF文档里面有表格数据的,如果想要编辑表格里面的数据,可以将该PDF文档转为Excel格式,然后编辑.本文,将以C#代码为例,介绍如何实现由PDF格式到Excel文档格式的转换.下面是具体步骤. dll引用方法 方法1 在程序中引入Spire.Pdf.dll文件:将 Spire.PDF for .NET 下载到本地,解压,安装.安装完成后,找到安装路径

  • 利用JS将图标字体渲染为图片的方法详解

    利用JS将图标字体渲染为图片的方法详解

    目录 前言 实现方式 html css js 效果 前言 在软件开发中肯定要用到图标,比如下图的 Groove 音乐中就用到了许多图标.一种获取这些图标的方法是把 Groove 音乐截个图,然后熟练地开启 Photoshop,开始抠图.这种方式很逊,效率也很低(虽然我刚开始就是这么干的). 如果打开 C:/Program File/WindowsApps(需要修改权限才能进入),可以发现几个名字里带 ZuneMusic 的文件夹,其中的某一个文件夹中会有字体文件 SegMVR2.ttf.这是一个

随机推荐