纯原生JS实现导出Excel文件

前言：

各种js库用起来冗余，并且只想简单的导出excel文件

选择table标签是为了后期能定制化内容

0、效果预览

excel文件：

浏览器控制台

触发下载：

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了

纯原生JS实现导出Excel文件相关推荐

如何使用JavaScript实现纯前端读取和导出excel文件（转）
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...
js实现导出Excel文件
1.EasyUI表格导出到Excel html: <span class="export" @click="exportToExcel">导出Exc ...
纯js导出Excel文件（无需引入插件）
纯js导出Excel文件(无需引入插件) 提示:代码没有来得及整理,大致代码都在这里 let thlist = [[{text: '序号', rowspan: '2'},{text: '姓名', ro ...
a标签下载文件，js/jq创建a标签导出Excel文件
a标签下载文件,js/jq 创建a标签导出Excel文件 1.设置dom(html) <button type="button" class="layui-btn ...
js网页导出excel表格文件
下载地址 js网页导出excel表格文件,没有使用任何第三方js类库,简单的实现table数据导出效果. dd:
poi导出excel文件,并生成原生图表(包括折线图,柱状图,饼状图,面积图)
前段时间,因为客户需要,要做一个导出excel文件功能,并能生成原生的图表的(不是把图片插入到excel文档),找了很多文档看,也看了很多别人的代码,个人也总结了一下,不足之处,请各位大牛谅解. 需要 ...
jQuery表格导出Excel文件以及网页内容导出Word文档
前言: 我在这里给大家介绍一下我们能用代码实现的最简单的两种转换为Excel文件以及Word文档的方法. jQuery表格导出Excel文件先来看看我们的层级划分: 如图所示: demo.css 代 ...
如何使用JavaScript导入和导出Excel文件
本文由葡萄城技术团队于原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript是一个涵盖多种框架.直译式.可以轻松自定义客户端的脚本 ...

纯原生JS实现导出Excel文件

前言：

0、效果预览

1、定义工具函数：

2、调用函数

纯原生JS实现导出Excel文件相关推荐

最新文章

热门文章