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

前言

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

一、插件方式

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文件内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

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

前言

一、插件方式

1.插件安装

2.引入

3.导出

二、本地直接导出

1.页面规则

2.在js中添加函数

3.调用

总结

推荐阅读

前端根据链接生成二维码的方案及相关常用API

JavaScript中类(class)的介绍和应用举例详解

微信小程序中使用 TDesign 组件库的方法

ESLint的简单使用方法(js,ts,vue)

javascript axios 实现进度监控的示例代码

使用JavaScript将PDF页面中的标注扁平化的操作指南

猜你喜欢

发表评论