前端直接导出excel文件的两种方式

更新时间：2025年01月06日 08:31:36 作者：库库的写代码

这篇文章主要介绍了两种方法在前端实现本地表格导出功能,分别是插件方式和本地直接导出,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

开发中可能会有这样的需求，本地自己生成了一个表格，此时表格并没有上传到后台服务器上，所以无法通过接口进行下载，此时就需要前端自行处理了。

一、插件方式

1.插件安装

 npm i xlsx
 npm i file-saver

2.引入

// index.vue文件
 import FileSaver from "file-saver"
 import XLSX from "xlsx"

3.导出

         exportExcel() {
			let et = XLSX.utils.table_to_book(
				//获取table的DOM
				document.getElementById('table-contents')
			);
			let etout = XLSX.write(et, {
				bookType: 'xlsx',
				bookSST: true,
				type: 'array'
			});

			try {
				FileSaver.saveAs(
					new Blob([etout], {
						type: 'application/octet-stream'
					}),
					'XXX.xls'
				);
			} catch (e) {
				//console.log(e, etout)
			}
			console.log(etout);
			return etout;
		}

二、本地直接导出

1.页面规则

页面必须要有table表格

<table border="1" cellspacing="0" id="table-parent" >
           <thead>
               <tr>
                 <th ></th>
               </tr>
           </thead>
           <tbody>
               <tr  >
                  <td></td>
               </tr>
           </tbody>     
    </table>

2.在JS中添加函数

var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,',
    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>{table}</table></body></html>',
        base64 = function(s) {
            return window.btoa(unescape(encodeURIComponent(s)))
        },
        format = function(s, c) {
            return s.replace(/{(\w+)}/g, function(m, p) {
                return c[p];
            })
        }
    return function(table, name) {
        if (!table.nodeType) table = document.getElementById(table);
        var ctx = {
            worksheet: name || 'Worksheet',
            table: table.innerHTML
        };
        window.location.href = uri + base64(format(template, ctx));
    }
})();

3.调用

tableToExcel(document.getElementById("table-parent"), "导出表格");

总结

到此这篇关于前端直接导出excel文件的两种方式的文章就介绍到这了,更多相关前端导出excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript类型检测的方法实例教程
这篇文章主要给大家介绍了关于JavaScript类型检测的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
JS实现简单加减购物车效果
这篇文章主要为大家详细介绍了JS实现简单加减购物车效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
javascript设置金额样式转换保留两位小数示例代码
本文为大家介绍下javascript设置金额样式即保留两位小数，下面有个不错的教程，需要的朋友可以了解下
2013-12-12
微信小程序开发之animation循环动画实现的让云朵飘效果
这篇文章主要介绍了微信小程序开发之animation循环动画实现的让云朵飘效果,结合实例形式分析了animation结合js时间函数实现循环动画效果的具体步骤与相关操作技巧,需要的朋友可以参考下
2017-07-07
JavaScript实现当网页加载完成后执行指定函数的方法
这篇文章主要介绍了JavaScript实现当网页加载完成后执行指定函数的方法,实例分析了javascript加载页面及执行函数的技巧,需要的朋友可以参考下
2015-03-03
第一次接触神奇的Bootstrap表单
第一次接触神奇的Bootstrap表单，Bootstrap让Web开发更迅速、更简单，感兴趣的小伙伴们可以参考一下
2016-07-07
ES6中Set和Map用法实例详解
这篇文章主要介绍了ES6中Set和Map用法,结合实例形式详细分析了ES6中Set和Map的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
2020-03-03
JS中reduce和map的优雅写法分享
这篇文章主要为大家详细介绍了JavaScript中一些reduce和map的优雅写法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
javascript删除数组元素的七个方法示例
这篇文章主要给大家介绍了关于javascript删除数组元素的七个方法，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
JavaScript文本特效实例小结【3个示例】
这篇文章主要介绍了JavaScript文本特效,结合3个实例分析了javascript基于定时器的文字动态操作特效相关实现技巧,需要的朋友可以参考下
2018-12-12