html 导出excel名字,js 导出excel文件

js导出Excel的方法

利用html的table表格的格式书写想要的excel格式

获取table的内容并组装成一个xls格式的字符串

利用Blob对象生成一个xls格式的文件

利用a标签的download属性创建文件名,并下载到本地

将字符串转成xls文件,本文主要利用Blob对象和URL.createObjectURL() 方法

Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。 File 接口基于Blob,继承了 blob的功能并将其扩展使其支持用户系统上的文件。

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

下面是个例子

//导出excel

export const tableToExcel = (tableDom,filename)=>{

if (!tableDom || tableDom.nodeType!=1){

return new Error('tableDom type error!')

}

var oHtml = tableDom.outerHTML;

var excelHtml = `

.tableA {

border-collapse: collapse;

}

.tableA .title th{

height: 50px;

font-size: 24px;

font-family: '微软雅黑';

font-weight: 700;

}

.tableA tr th {

border: 1px #000 solid;

height: 40px;

background: #efefef;

}

.tableA tr td {

padding: 0 40px;

border: 1px #000 solid;

height: 40px;

text-align: center;

}

.tableA .footer td {

font-size: 20px;

font-weight: 700;

}

${oHtml}

`;

var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' });

// 创建一个a标签

var oA = document.createElement('a');

// 利用URL.createObjectURL()方法为a元素生成blob URL

oA.href = URL.createObjectURL(excelBlob);

// 给文件命名

oA.download = filename+'.xls';

// 模拟点击

oA.click();

}

另一种方式

使用window.btoa将字符转换成base64,然后将a标签的href设置为 'data:application/vnd.ms-excel;base64,'+base64编码的数据,使用a标签的download进行下载。

在个浏览器中,使用window.btoa对Unicode字符串进行编码都会出发一个字符越界的异常,解决方法是,先把Unicode字符串转换为UTF-8编码。如下方法

function utf8_to_b64( str ) {

return window.btoa(unescape(encodeURIComponent( str )));

}

function b64_to_utf8( str ) {

return decodeURIComponent(escape(window.atob( str )));

}

// Usage:

utf8_to_b64('? à la mode'); // "4pyTIMOgIGxhIG1vZGU="

b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "? à la mode"

//译者注:在js引擎内部,encodeURIComponent(str)相当于escape(unicodeToUTF8(str))

//所以可以推导出unicodeToUTF8(str)等同于unescape(encodeURIComponent(str))

下面一个例子

var tableToExcel = function(table,name){

var uri = 'data:application/vnd.ms-excel;base64,',

template = '

',

base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },

format = function(s, c) { return s.replace(/{(\w+)}/g,function(m, p) { return c[p]; }) }

if (!table.nodeType) table = document.getElementById(table)

var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}

let a = document.createElement('a');

a.href = uri + window.btoa(unescape(encodeURIComponent('\uFEFF'+format(template,ctx))));

a.download = 'aaa.xls'

a.click();

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值