HTML轉(zhuǎn)Excel并實現(xiàn)打印，下載功能的案例

發(fā)布時間：2020-10-24 16:34:43 來源：億速云閱讀：168 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)HTML轉(zhuǎn)Excel并實現(xiàn)打印，下載功能的案例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

<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">流轉(zhuǎn)</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">內(nèi)容</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>節(jié)點</td>
				<td>狀態(tài)</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.超鏈接_導(dǎo)出文件-->
		<a id="print-click">超鏈接_導(dǎo)出表格</a>
		<!-- 下載方法2.引入文件保存js-->
		<input type="button" onclick="download()" value="函數(shù)_導(dǎo)出表格"></input>
		<input type="button" onclick="printout()" value="打印"></input>
		<!-- 下載方法2.引入文件保存js-->
		<script type="application/javascript" src="js/FileSaver.js" ></script>
		<script>
			// 使用outerHTML屬性獲取整個table元素的HTML代碼（包括<table>標(biāo)簽），然后包裝成一個完整的HTML文檔，設(shè)置charset為urf-8以防止中文亂碼
			var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
			// 實例化一個Blob對象，其構(gòu)造函數(shù)的第一個參數(shù)是包含文件內(nèi)容的數(shù)組，第二個參數(shù)是包含文件類型屬性的對象
			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);
			// 設(shè)置文件名，目前只有Chrome和FireFox支持此屬性
			a.download = "會簽單.xls";

			function download() {
				debugger
					// 使用outerHTML屬性獲取整個table元素的HTML代碼（包括<table>標(biāo)簽），然后包裝成一個完整的HTML文檔，設(shè)置charset為urf-8以防止中文亂碼
					var html2 = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";
					// 實例化一個Blob對象，其構(gòu)造函數(shù)的第一個參數(shù)是包含文件內(nèi)容的數(shù)組，第二個參數(shù)是包含文件類型屬性的對象
					var blob2 = new Blob([html2], {
						type: "application/vnd.ms-excel"
					});
					saveAs(blob2, "應(yīng)系單.xls");
			};
			  //打印具體實現(xiàn)代碼
           function printout() {
           		debugger;
                var newWindow;
                //打開一個新的窗口  
                newWindow = window.open();
                // 是新窗口獲得焦點  
                newWindow.focus();
                //保存寫入內(nèi)容  
                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();
                //關(guān)閉打開的臨時窗口
                newWindow.close();
                return false;
           };
		</script>
	</body>

</html>

關(guān)于HTML轉(zhuǎn)Excel并實現(xiàn)打印，下載功能的案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

HTML轉(zhuǎn)Excel并實現(xiàn)打印，下載功能的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

HTML轉(zhuǎn)Excel并實現(xiàn)打印，下載功能的案例