HTML转Excel，并实现打印，下载功能

博主最大Lv63

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<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="150 ">

<col width="80 ">

<col width="150 ">

<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 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>

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

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

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

<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>

本文讲解了HTML转Excel，并实现打印，下载功能，更多相关内容请关注php中文网。