溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關HTML轉Excel并實現打印，下載功能的案例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
<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" onclick="download()" value="函數_導出表格"></input>
<input type="button" onclick="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>關于HTML轉Excel并實現打印，下載功能的案例就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
