js导出Excel的方法

使用html表格格式编写所需的excel格式

获取表格的内容，并将其组装成xls格式的字符串

使用Blob对象生成xls格式的文件

使用标签的下载属性创建一个文件名，并在本地下载

示例：js导出Excel

表格目录

先写一个普通的html表单

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

元名称='视口'内容='宽度=设备宽度，初始比例=1.0 '

元http-equiv=' X-UA-兼容'内容='ie=edge '

标题文档/标题

样式媒体='屏幕'。tableA {

边界塌陷：塌陷；

}。tableA。标题th{

height: 50px

font-size : 24px；

Font-family: '微软雅黑'；

font-weight : 700；

}。表A tr th

border: 1px #000固体；

height: 40px

background: # efefef

}。tableA tr td {

padding: 0 40px

border: 1px #000固体；

height: 40px

text-align:中心；

}。tableA。页脚td {

font-size : 20px；

font-weight : 700；

}

/style

/head

身体

table border color=' black ' class=' TableA '

tr class='title '

Th栏='4 '学生信息/th

/tr

tr

姓名/th

Th性别/th

年龄

Th类/th

/tr

tr

Td小明/td

Td男/td

td19/td

Td1移位/td

/tr

tr

Td黄晓/td

Td男/td

td20/td

Td2移位/td

/tr

tr

Td老王/td

Td男/td

td29/td

Td3移位/td

/tr

tr class='页脚'

Td colspan='4 '总人数，3人/td

/tr

/table

/body

/html

让我们看看浏览器中显示的效果，如下所示。这里我给表格添加了一个样式：

获取表格的内容，并将其打包成xls格式的字符串

下一步是获取表格的html内容，包括标签的类或id。

var OhTMl=document . GetElementsByclassname(' TableA ')[0]。outerHTML

本文将表格和样式结合成一个html，

[附加es6字符串模板链接[es6字符串模板][1]]

[1]:#模板字符串' es6字符串模板'

//这里我使用es6的字符串语法` `和$ {}。不熟悉es6的同学可以去看看。

//你有没有注意到我这里的风格是从HTML中的风格复制过来的？

var excelHtml=`

超文本标记语言

头

meta charset='utf-8' /

风格。tableA {

边界塌陷：塌陷；

}。tableA。标题th{

height: 50px

font-size : 24px；

Font-family: '微软雅黑'；

font-weight : 700；

}。表A tr th

border: 1px #000固体；

height: 40px

background: # efefef

}。tableA tr td {

padding: 0 40px

border: 1px #000固体；

height: 40px

text-align:中心；

}。tableA。页脚td {

font-size : 20px；

font-weight : 700；

}

/style

/head

身体

${oHtml}

/body

/html

`;

生成xls文件并通过标签下载到本地

前面的准备工作也差不多，下一步就是把字符串转换成xls文件。这里主要使用Blob对象和URL.createObjectURL()方法

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

URL.createObjectURL()静态方法创建一个包含表示参数中给定对象的URL的DOMString。此网址的生命周期绑定到创建它的窗口中的文档。新的网址对象代表指定的文件对象或斑点对象。

Blob构造函数用法示例(生成一个json文件):

var debug={ hello : ' world ' }；

var Blob=new Blob([JSON . stringify(debug，null，2)]，

{ type : ' application/JSON ' })；

同样，使用第二步中的字符串生成Excel

var ExcelBob=new Blob([ExcelHTML]，{ type : ' application/vnd . ms-excel ' })

最后一步是通过A标签本地下载。在下载之前，您可以使用标签的“下载”属性来命名它

//创建a标记

var OA=document . CreateElement(' a ')；

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

OA . href=URL . CreateObjectURL(ExcelBob)；

//命名文件

OA.download='学生名单。xls '；

//模拟点击

OA . click()；

最终的xls效果如下：

可以看出除了px之外，浏览器风格都会有偏差，其他设置都是有效的。只要微调一下就能达到想要的效果

Ps:由于权限问题，生成的excel格式只能是。xls，而且每次打开都会弹出来问。因此，建议打开excel后保存一份