js 实现纯前端将数据导出excel两种方式，亲测有效

已于 2024-05-20 16:19:19 修改
阅读量10w+ 收藏 597
点赞数 183
文章标签： js导出excel 纯前端 导出excel 前端导出excel 亲测有效
于 2018-05-23 14:33:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhzzcc_/article/details/80419396
版权

关注每天领外卖打车红包

方法一

将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]){
                // 增加\t为了不让表格显示科学计数法或者其他格式
                str+=`<td>${ jsonData[i][key] + '\t'}</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>

方法二

通过将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 = `姓名,电话,邮箱\n`;
        // 增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
            for(const key in jsonData[i]){
                str+=`${jsonData[i][key] + '\t'},`;     
            }
            str+='\n';
        }
        // 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>
hhzzcc_
关注
  • 183
    点赞
  • 踩
  • 597
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 146
    评论
js实现将数据导出为excel文件
API搬运工
03-05 2418
安装 xlsx npm install --save xlsx 实现方法 toExcel(){ let workBook = XLSX.utils.table_to_book(document.getElementById('data')); let wbout = XLSX.write(workBook, { bookType: 'xlsx', ...
js 导出excel（支持大量数据）
11-02
前端导出数据为excel（兼容chrome 和 IE10以上版本），列举了网上常用的两种方法外，新增了可以导出超过5W行数据的方法
利用前端直接导出excle表格
06-07
利用前端的表格生成excel
前端导出excel操作详细流程
最新发布
weixin_72737562的博客
06-19 317
工作中有大量用到table表格导出excel的场景，所以基于xlsx插件，做一个完整的表格下载流程
VUE导出Excel，两种方法，方法二带样式：文字居中，自动换行，列宽设置，单元格合并，冻结表头等
03-29
SheetJS免费版的不支持格式，比如居中、自动换行都不行。xlsx-style是SheetJS的一个分支，且支持各种格式，可以做到文字居中，自动换行，列宽设置，单元格合并，冻结表头等。
前端实现Excel文件导出功能的完整指南（vue实现excel文件导出功能）
weixin_65793170的博客
04-18 2913
在许多业务场景中，用户需要将网页上的数据导出到Excel文件中进行进一步处理或分享。通过前端实现Excel文件的导出功能，可以提高用户体验并简化数据交互流程。
前端Excel导出实用方案（完整源码，可直接应用）
零凌林的博客
12-07 2786
本文为前端导出方案，使用的是vue2的语法，支持大数据量导出。目前检测，单表一万五千列，一万行是没问题的。适配antd-vue组件库，更改成element或者其他的组件库同样很好替换
前端导出Excel？使用js/ts导出Excel？背景色、指定单元格合并等高定制化？选它——Exceljs
weixin_46086458的博客
02-21 2351
这篇文章我首先是在掘金中发出来的，期间也收获了一些朋友们的支持，同时也是觉得 exceljs 这个工具库在鱼龙混杂的前端excel导出、js导出excel等工具下是非常好的一个。不需要担心是vue还是react还是nodejs环境，它统统能做。特此也在此发布一下，希望能帮到更多的朋友。
vue——前端生成xlsl文件（数组转xlsx文件）
07-05 595
【代码】vue——前端生成xlsl文件（数组转xlsx文件）
前端js生成并导出Excel文件
Long_gone的博客
10-20 6081
不用调接口，全由js就可完成Excel文件的生成和导出，示例如下：
纯前端 导出Excel文件 进阶版
qq_44327851的博客
11-30 486
即使给每个colunm设置了样式，比如给每个单元格设置了边框，但是实际导出文件的时候却发现仍然有一些单元格样式没生效，再仔细看会发现，样式没生效的单元格都是没有数据的。：设置excel的样式是跟着数据的，既然是因为没有数据导致的样式没生效，那么我们就在数据生成的时候加多一种可能，让其生成一种不占位置，人为看不见的数据。），导出excel的基本步骤在这里就不再多叙述，本文主要是介绍导出excel的一些enhancement的实现方法和注意事项。中的'A2'位置插入一个空的二维数组。
js实现Excel导出
03-01
最近在做一个项目，涉及到导出数据到Excel表格，由于是采用的前后端分离模式开发的，之前常用的方法已经失效，在网上找了一些资料和方法，已经完成整理，都能正常使用
纯前端：luckysheet在线编辑Excel导出，Excel文件导入
10-09
《纯前端实现：Luckysheet在线编辑Excel及文件导入导出详解》 在现代Web应用中，处理Excel数据已经成为一种常见的需求，特别是在数据分析、报表制作等领域。本文将深入探讨一个纯前端解决方案——Luckysheet，它...
excel导入导出，包括纯前端解析，后端解析导入导出方式
03-27
这里我们将深入探讨“excel导入导出”的两种主要实现方式：纯前端解析和后端解析，以及如何在前后端之间进行数据传输。 首先，让我们了解纯前端解析的实现。这种方式通常依赖于JavaScript库，如Papa Parse或SheetJS...
前端导出表格到excel，适合vue和jq框架
07-28
Vue和jQuery（jq）是两种广泛使用的前端框架，而Excel作为数据管理的标准工具，用户通常期望能直接从网页导出表格到Excel文件。本教程将详细讲解如何在Vue和jQuery框架下实现这个功能。 1. **Vue框架中的表格导出**...
vue.js导出Excel所需要的JS文件 修改当前为当前日期
05-14
下面我们将详细探讨如何利用这两个库在Vue.js项目中导出Excel文件，并重点关注如何将当前日期添加到导出的文件名中。 首先，Blob.js是一个JavaScript库，用于在浏览器中创建和操作Blob对象。Blob是Binary Large ...
Export2Excel.js导出excel
11-18
"Export2Excel.js导出excel"是一个针对这种情况的解决方案，它允许在Vue项目中实现前端直接导出Excel文件。下面将详细阐述这个功能的实现原理和涉及的技术。 首先，"Blob.js"是用于处理浏览器中的Blob对象的...
导出自定义Excel表格（纯前端实现）
MoXinXueWEB的博客
03-15 4875
小菜鸟在总结
前端实现excel导出表格(纯前端实现)
liang04273的博客
01-06 1063
vue中前端自己实现excel导出表格。实现是给表格绑定一个id，通过获取dom来导出。
如何利用exceljs将前端数据导出成excel
07-28
要利用exceljs将前端数据导出成Excel，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了exceljs和file-saver这两个依赖库。你可以使用npm命令进行安装，如下所示： ``` npm install exceljs npm install file-saver ``` 2. 在你的前端代码中引入ExcelJS和saveAs： ``` import ExcelJS from 'exceljs'; import saveAs from 'file-saver'; ``` 3. 创建一个Excel对象，并定义导出Excel的方法。你可以参考下面的代码示例： ``` const exportExcel = () => { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet 1'); // 添加表头 const headerRow = worksheet.addRow(header); // 设置自定义表头 headerRow.eachCell((cell, index) => { cell.value = customHeader\[index - 1\]; }); // 添加数据 tableData.forEach((data) => { const row = worksheet.addRow(Object.values(data)); }); // 合并单元格 mergeList.forEach((merge) => { worksheet.mergeCells(merge.startRow, merge.startColumn, merge.endRow, merge.endColumn); }); // 导出Excel文件 workbook.xlsx.writeBuffer().then((buffer) => { const blob = new Blob(\[buffer\], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(blob, '表格文件名称.xlsx'); }); }; ``` 4. 在你的页面中调用exportExcel方法来触发导出操作。你可以在按钮的点击事件中调用该方法，如下所示： ``` <button @click="exportExcel">导出</button> ``` 通过以上步骤，你就可以利用exceljs将前端数据导出成Excel文件了。请注意，你需要根据你的具体需求来调整代码中的变量和参数，以适应你的数据结构和导出需求。 #### 引用[.reference_title] - *1* *3* [使用ExcelJS实现excel的前端导出功能(Vue3+TS)](https://blog.csdn.net/weixin_50543490/article/details/131207514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [纯前端导出带样式的excel：exceljs](https://blog.csdn.net/shangshuxian1999/article/details/129087172)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 146
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hhzzcc_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值