jquery表格转excel表格插件

PetitQ 表单/表格 2020-4-05 719 2 0

excel-gen.js 是一款 jquery 表格转 excel 表格插件。该 jquery 插件可以在客户端将 HTML 表格导出为 Excel 表格，并且下载为一个 xlsx 类型的 Excel 文件。

方法一:

excel-gen.js 表格转 excel 表格插件依赖于 jszip.js 和 FileSaver.js 插件。

也想出现在这里？联系我们吧

<script src="path/to/jquery.min.js"></script>

<script src="path/to/jszip.min.js"></script>

<script src="path/to/FileSaver.min.js"></script>

```
<script src="excel-gen.js"></script>
```

其中，jszip.js 用于创建，读取和编辑 Zip 文件。FileSaver.js 用于保存 Excel 文件。

HTML 结构:

为页面中要转换为 Excel 的表格设置一个 id，并添加一个下载按钮。

```
<div class="table-responsive">
```

<table class="table table-bordered" id="example-table-id">

```
    <thead>
```
```
      <tr>
```
```
        <td>序号</td>
```
```
        <td>姓名</td>
```
```
        <td>成绩</td>
```
```
      </tr>
```
```
    </thead>
```
```
    <tbody>
```
```
      <tr>
```
```
        <td>1</td>
```
```
        <td>张三</td>
```
```
        <td>95</td>
```
```
      </tr>
```
```
      <tr>
```
```
        <td>2</td>
```
```
        <td>李四</td>
```
```
        <td>82</td>
```
```
      </tr>
```
```
      <tr>
```
```
        <td>3</td>
```
```
        <td>王五</td>
```
```
        <td>89</td>
```
```
      </tr>
```
```
    </tbody>
```
```
  </table>
```
```
</div>
```

初始化插件:

在页面 DOM 元素加载完毕之后，通过 new ExcelGen()方法创建一个 ExcelGen 实例。

```
myExcel = new ExcelGen({
```
```
  "src_id": "example-table-id",
```
```
  "show_header": true
```
```
});
```

然后通过 generate()方法来创建 Excel 表格。

$("#generate-excel-btn").click(function () {

```
  myExcel.generate();
```
```
});
```

excel-gen.js jquery 表格转 excel 表格插件插件的 github 地址为：https://github.com/ecscstatsconsulting/js-excel-generator

方法二：

```
<html>
```
```
	<head>
```

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

```
	</head>
```
```
	<body link="blue" vlink="purple">
```

		<table id="print-content" border="1" cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>

```
			<colgroup>
```
```
				<col width="80 ">
```
```
				<col width="80 ">
```
```
				<col width="150 ">
```
```
				<col width="80 ">
```
```
				<col width="150 ">
```
```
				<col width="80 ">
```
```
				<col width="80 ">
```
```
			</colgroup>
```

			<tr height="20" style="text-align: center;font-size:18px">

```
				<td colspan="7">会签单</td>
```
```
			</tr>
```

			<tr height="20" style="text-align: center;font-size:14px">

```
				<td></td>
```
```
				<td colspan="2">流转</td>
```
```
				<td></td>
```
```
				<td colspan="3">会议</td>
```
```
			</tr>
```

			<tr height="20" style="text-align: center;font-size:14px">

```
				<td>名称</td>
```
```
				<td colspan="2">自动获取</td>
```
```
				<td>编号</td>
```
```
				<td colspan="3">自动获取</td>
```
```
			</tr>
```

			<tr height="20" style="text-align: center;font-size:14px">

```
				<td>主持</td>
```
```
				<td colspan="2">自动获取</td>
```
```
				<td>类型</td>
```
```
				<td colspan="3">自动获取</td>
```
```
			</tr>
```

			<tr height="20" style="text-align: center;font-size:14px">

```
				<td>人</td>
```
```
				<td colspan="2">自动获取</td>
```
```
				<td>日期</td>
```
```
				<td colspan="3">自动获取</td>
```
```
			</tr>
```

			<tr height="100" style="text-align: center;font-size:14px">

```
				<td rowspan="5">内容</td>
```

				<td colspan="6" rowspan="5">自动获取</td>

```
			</tr>
```
```
			<tr/>
```
```
			<tr/>
```
```
			<tr/>
```
```
			<tr/>
```

			<tr height="20" style="text-align: center;font-size:14px">

```
				<td>备注</td>
```
```
				<td colspan="6">自动获取</td>
```
```
			</tr>
```

			<tr height="24" style="text-align: center;font-size:16px">

```
				<td colspan="7">意见</td>
```
```
			</tr>
```

			<tr height="24" style="text-align: center;font-size:14px">

```
				<td>序号</td>
```
```
				<td>人</td>
```
```
				<td>部门</td>
```
```
				<td>意见</td>
```
```
				<td>时间</td>
```
```
				<td>节点</td>
```
```
				<td>状态</td>
```
```
			</tr>
```

			<tr height="20" style="text-align: center;font-size:14px">

```
				<td>1</td>
```
```
				<td>顾</td>
```
```
				<td>办公室</td>
```
```
				<td>同意！</td>
```
```
				<td>2018/5/14 15:21</td>
```
```
				<td></td>
```
```
				<td>已提交</td>
```
```
			</tr>
```
```
		</table>
```

		<!-- 下载方法1.超链接_导出文件-->

		<a id="print-click">超链接_导出表格</a>

		<!-- 下载方法2.引入文件保存js-->

		<input type="button" οnclick="download()" value="函数_导出表格"></input>

		<input type="button" οnclick="printout()" value="打印"></input>

		<!-- 下载方法2.引入文件保存js-->

		<script type="application/javascript" src="js/FileSaver.js" ></script>

```
		<script>
```

			// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码

			var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";

			// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象

```
			var blob = new Blob([html], {
```
```
				type: "application/vnd.ms-excel"
```
```
			});
```

			var a = document.getElementById("print-click");

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

```
			a.href = URL.createObjectURL(blob);
```

			// 设置文件名，目前只有Chrome和FireFox支持此属性

```
			a.download = "会签单.xls";
```
```
 
```
```
			function download() {
```
```
				debugger
```

					// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码

					var html2 = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";

					// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象

```
					var blob2 = new Blob([html2], {
```
```
						type: "application/vnd.ms-excel"
```
```
					});
```
```
					saveAs(blob2, "应系单.xls");
```
```
			};
```
```
			  //打印具体实现代码
```
```
           function printout() {
```
```
           		debugger;
```
```
                var newWindow;
```

                //打开一个新的窗口

                newWindow = window.open();

                // 是新窗口获得焦点

```
                newWindow.focus();
```
```
                //保存写入内容  
```

                var newContent = "<html><head><meta charset='utf-8'/><title>打印</title></head><body>"

                newContent += document.getElementById("print-content").outerHTML;

                newContent += "</body></html>"

                // 将HTML代码写入新窗口中

                newWindow.document.write(newContent);

```
                newWindow.print();
```
```
                // close layout stream 
```

                newWindow.document.close();

                //关闭打开的临时窗口

```
                newWindow.close();
```
```
                return false;
```
```
           };
```
```
		</script>
```
```
	</body>
```
```
</html>
```

jquery 表格转 excel 表格插件

已有 180 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

jquery表格转excel表格插件

方法一:

HTML 结构:

初始化插件:

方法二：

jquery 表格转 excel 表格插件

相关文章

CSS3炫酷表单input输入框美化效果

Bootstrap tagsinput自定义标签插件

简洁Bootstrap登录框设计效果

评论：

发表回复取消回复

热销模板

表单/表格

方法一:

HTML 结构:

初始化插件:

方法二：

jquery 表格转 excel 表格插件

相关文章

评论：

发表回复 取消回复

热销模板

发表回复取消回复