纯原生JS实现导出Excel文件

最新推荐文章于 2024-03-19 09:53:21 发布
最新推荐文章于 2024-03-19 09:53:21 发布
阅读量1.8k 收藏 7
点赞数
文章标签： excel javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40020447/article/details/130491741
版权

前言：

  1. 各种js库用起来冗余，并且只想简单的导出excel文件
  2. 选择table标签是为了后期能定制化内容

0、效果预览

excel文件：

image-20230504173114035

浏览器控制台

image-20230504173338415

触发下载：

image-20230504173032895

1、定义工具函数：

// xlsxExport.js
/**
 *纯前端 原生导出excel
 */

const trans2Base64 = (content) => {
  return window.btoa(unescape(encodeURIComponent(content)));
};

export const exportExcelFromFront = (params) => {
  const { cellList, headerList, caption, exportName = 'exportName' } = params;

  const captionEle = caption ? `<caption>${caption}</caption>` : ''; // 表格标题
  const headerEle = `<tr>${headerList?.map((item) => `<th>${item}</th>`)?.join('')}</tr>`;
  const cellEle = cellList
    ?.map((itemRow) => `<tr>${itemRow?.map((itemCell) => `<td>${itemCell}</td>`)?.join('')}</tr>`)
    ?.join('');

  const excelContent = `${captionEle}${headerEle}${cellEle}`;
  let excelFile =
    "<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'>";
  excelFile +=
    '<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>';
  excelFile += "<body><table width='10%'  border='1'>";
  excelFile += excelContent;
  excelFile += '</table></body>';
  excelFile += '</html>';
  const link = `data:application/vnd.ms-excel;base64,${trans2Base64(excelFile)}`;
  const a = document.createElement('a');
  a.download = `${exportName}.xlsx`;
  a.href = link;
  a.click();
};

2、调用函数

// 根据自己的实际目录去调
import { exportExcelFromFront } from '@/utils/xlsxExport';

const handleExport = () => {
    const caption="我是heander标题"
    const headerList = ['标题1','标题2','标题3'];
    const cellList = [
      ['内容1','内容2','内容3'],
      ['内容4','内容5','内容6'],
      ['内容7','内容8','内容9'],
    ];
  	const exportName='导出的文件名称'

    const params = {
      caption,
      headerList,
      cellList,
      exportName,
    };
    exportExcelFromFront(params);
  };

================
over了

No Big Deal
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js导出excel为xlsx格式
05-27
Javascript导出excel为xlsx格式，兼容IE6+和主流浏览器，下载下来直接可以使用。 其他javascript导出excel插件可看作者文章：https://blog.csdn.net/qq_21693027/article/details/80459677
html页面表格导出excel（原生js浏览器全兼容）
09-10
如果后台不提供导出excel表格的接口，那么我们js有自己的方法可以支持。操作简单，可封装。完全抛弃后台，自己展示，自己导出，非常实用，资源内包含demo，一目了然。（原生js浏览器全兼容）
探索ExcelJS：强大的JavaScript库，让你在Web上轻松操作Excel
最新发布
gitblog_00048的博客
03-19 407
探索ExcelJS：强大的JavaScript库，让你在Web上轻松操作Excel 项目地址:https://gitcode.com/exceljs/exceljs ExcelJS 是一个轻量级但功能丰富的JavaScript库，它允许开发者在Web环境中创建、读取和修改Excel文件，无需借助服务器端的技术支持。对于需要处理大量表格数据或提供交互式报表的Web应用来说，这是一个理想的解决方案。 ...
原生JavaScript json导出excel 可自定义表头
07-14
使用原生JavaScript把json数据转table dom，再利用table转excel导出
JavaScript 实现 Excel数据导出 支持多个Sheet页导出
09-20
纯JavaScript实现json格式数据导出到Excel文件,支持多个Sheet页导出
实现导出数组数据到Excel文件（Element-ui，JS）
0303
05-12 634
实现导出数组数据到Excel文件（Element-ui，JS两种方法）
JS实现Excel表格数据的导出
weixin_48567214的博客
12-28 8729
vue中实现excel表格的导出
js 导出 excel
热门推荐
不懂一休
09-26 1万+
js 导出 excel
js生成execl表格
IT菜鸟
06-01 4063
javascript生成execl表格
js实现导出Excel文件
水清梦蓝
11-16 4824
实现表格导出Excel的几种方法
JavaScript实现导出excel
你退后的地盘
03-15 3344
使用JavaScript可以通过多种方式导出Excel文件，其中一种常用的方法是将数据转换为CSV格式并在浏览器中创建一个下载链接。
ajax原生方法实现导出excel
12-23
后端（如 springboot）直接返回excel的输出流到前端，前端使用 该方法(js原生ajax)进行接收并实现页面的下载
原生php实现excel文件读写的方法分析
12-17
最近在工作中遇到一个需求，需要将数据库中的数据导出到excel文件中，并下载excel文件。因为以前没做过，所以就百度了一下，网上说的大多是使用PHPExcel类来操作excel文件，这还要去下载这个类才能使用，而我只想...
如何使用JavaScript实现纯前端读取和导出excel文件
时清云的博客
11-18 2598
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。普通版本不支持定义字体、颜色、背景色等，有这个功能需要的可以使用pro版，好像是要收费的，因为官网没看到下载地址。
js将json数组导出为excel
weixin_41463944的博客
07-13 1800
js将json数组导出为excel
纯前端 导出Excel文件(包括导出用数组数据模拟文件数据和实际后端返回的文件数据)的 方法
qq_44327851的博客
10-26 2226
在纯前端导出文件的一种常见方法是通过生成下载链接来实现，可以使用Blob对象和URL.createObjectURL()方法来实现,因为现在工作中主要运用的前端框架是Angular，这篇文章将以angular为例进行阐述。
js 前端实现将json格式数组下载到excel(xls、xlsx、csv)表格里
棠樾的博客
02-03 1866
项目需求：上传文件时如果有错误信息，则上传不成功，需要提示用户下载查看错误信息。下载查看错误信息是前端根据后台返回的对象数组放到excel表格中的。 后台返回的数组： 效果如下： 在开始之前先要了解一下几个excel格式的区别： 1.后缀是xls的在2007版本之后的office打开会有提示(xls在wps上打开没有提示) 2.后缀是xlsx在2007版本之后的打开没有提示，但是在200...
Javascript实现把网页中table的内容导入到excel中的几种方法__摘录
天天成长的博客
03-05 342
[b][size=x-large][url=http://zgqhyh.iteye.com/blog/469033]分享程序员赚钱方法[/url][/size][/b] Javascript实现把网页中table的内容导入到excel中的几种方法 一、 直接拷贝整个表格到EXCEL中 二、 ...
原生js导出Excel表格，兼容ie
05-27
要在原生js中导出Excel表格并兼容ie，可以使用ActiveXObject对象。以下是代码示例： ```javascript function exportExcel(tableId) { // 获取表格对象 var tbl = document.getElementById(tableId); // 创建Excel对象 var excel = new ActiveXObject("Excel.Application"); // 创建Workbook对象 var book = excel.Workbooks.Add(); // 创建Worksheet对象 var sheet = book.Worksheets(1); // 将表格内容复制到Worksheet var range = sheet.Range(sheet.Cells(1, 1), sheet.Cells(tbl.rows.length, tbl.rows[0].cells.length)); range.Value = getTableData(tbl); // 显示Excel excel.Visible = true; } // 获取表格数据 function getTableData(table) { var arr = []; for (var i = 0; i < table.rows.length; i++) { var row = []; for (var j = 0; j < table.rows[i].cells.length; j++) { row.push(table.rows[i].cells[j].innerText); } arr.push(row); } return arr; } ``` 调用exportExcel函数，传入表格的id即可导出Excel表格。需要注意的是，使用ActiveXObject对象需要在IE浏览器中开启ActiveX控件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值