javascript 实现纯前端将数据导出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>

上边的两段代码复制即可用。

到此这篇关于javascript 实现纯前端将数据导出excel两种方式的文章就介绍到这了,更多相关javascript 数据导出excel内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue导出json数据到Excel电子表格的示例

    Vue导出json数据到Excel电子表格的示例

    网上看了很多文档感觉都不全,这里写一篇完整的详细教程. 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.下载两个所需要的js文件Blob.js和 Export2Excel.js. 这里贴下下载地址: Export2Exce_jb51.rar 三.src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js

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

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

  • 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实现数据导出为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具体操作:\

  • AngularJs导出数据到Excel的示例代码

    公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家. 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML <div id="exportable"> <table width="100%"> <thead> <tr> <th>Na

  • 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

  • JSP实现从数据库导出数据到Excel下载的方法

    JSP实现从数据库导出数据到Excel下载的方法

    本文实例讲述了JSP实现从数据库导出数据到Excel下载的方法.分享给大家供大家参考,具体如下: 关键代码: <%@ page contentType="application/msexcel" %> <% //response.setHeader("Content-disposition","inline; filename=videos.xls"); response.setHeader("Content-disp

  • javascript 实现纯前端将数据导出excel两种方式

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

  • SpringBoot EasyPoi动态导入导出的两种方式实现方法详解

    SpringBoot EasyPoi动态导入导出的两种方式实现方法详解

    目录 前言 一.基于@Excel的 isColumnHidden 属性 1.1 实现原理 1.2 实现步骤 1.3 实现效果 二. 基于List< ExcelExportEntity > 的导出 实现效果 总结 前言 一开始为了图方便,使用的是土方法,即创建多个不同的实体类,每个实体类对应不同的列.这样虽说能实现,但实在不想多复制实体类,把代码堆的和shi山一样.于是查看官方文档,里面确实提供了更加优雅的实现方式.废话不多说,开整. 一.基于@Excel的 isColumnHidden 属性

  • vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截）

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个

  • JavaScript为对象原型prototype添加属性的两种方式

    复制代码 代码如下: <script type="text/javascript"> <!-- /* 给原型 prototype 添加属性的两种方式 */ //方式一 var myObj = function(){ this.study = "JavaScript"; } myObj.prototype.hobby = function() { this.hobby = "See girl"; } var newObj = ne

  • 浅谈vue项目用到的mock数据接口的两种方式

    1.使用devServer.before进行数据mock //通过配置devServer.before选项,设置url访问路径及response响应数据,进行mock数据. const { data } = require('./data.json') // 引入json数据对象 //vue.config.js配置文件中进行Vue CLI的配置 module.exports = { //... devServer: { before: function(app, server) { app.ge

  • JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法

    目录 设置 JavaScript 电子表格项目 添加 Excel 导入代码 将数据添加到导入的 Excel 文件 添加迷你图 添加 Excel 导出代码 JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话“凡是能用JavaScript实现的东西,最后都会用JavaScript实现”.Excel 电子表格自 1980 年代以来一直为各行业所广泛使用,至今已拥有超过3亿用户,大多数人都熟悉 Exc

  • python脚本实现数据导出excel格式的简单方法(推荐)

    实习期间,服务器的一位师兄让我帮忙整理一下服务器的log数据,最终我用Python实现了数据的提取并将其用Excel格式导出.下面是我Python实现的源码,可以自动遍历某一文件目录下的所有文本文件,并将总的数据导出到Excel文件中,导出为Excel格式这样就比较方便统计了. //实现将目录下所有文件格式为.txt的文件进行遍历统计,如果是别的格式直接将下面的.txt改为你所需要的格式后缀就可以了,比较方便. //过程就是先将所有的文件中的内容提取出来写入到一个新文件中,然后再从新文件中提取数

  • PHP将数据导出Excel表中的实例(投机型)

    PHP将数据导出Excel表中的实例(投机型)

    1.简介 如何利用最简单粗糙暴力的方法将数据写入Excel文件中呢? 因为ms word和excel的文档都支持html文本格式,因此我们可以基于这个原理采用html文本格式进行数据的输出. 在html中,我们只需要将数据照着所想要的顺序放进相应的html表格中即可. 我们采用PHP进行数据获取整理以及构造相应的html文本,最后通过字节流输出下载到用户本地. 2.代码 直接上代码,这是一个很简单的程序,里面都带有注释了. ExportExcel.class.php文件 <?php class

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Java SpringMVC框架开发之数据导出Excel文件格式实例详解

    在平时的开发中,我们会经常遇到这样一个需求,要在页面通过一个『导出』按钮把查询出的数据导出到 Excel 表格中.本文即为实现上述需求的一个小实例. 环境配置 jar包 poi.jar jdk 1.6 tomcat 7.0 eclipse 4.4.0 本 Demo 是在 SpringMVC框架中实现. 页面 export.jsp 很简单,就只有一个超链接. <%@ page language="java" contentType="text/html; charset=

随机推荐