使用方法
-
-
引入所需要的js檔案
依次引入：
jQuery.js
fileSaver.js
jquery.wordexport.js
- 将需要的内容解析為一個表格
- 使用
$("#page_content").wordExport(表名);
使用注意
-
- 下載下傳fileSaver的時候，如果dist目錄下js檔案報錯，可以使用src目錄下js檔案。
- 如果将樣式儲存為外部樣式或嵌入式樣式，在下載下傳的時候可能會引用不到，是以在案例中直接使用了内聯式css樣式。
案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<button id="download" style="height: 100px;width: 100px"> 下載下傳</button>
<div class="page-content" id="page_content" style="box-sizing: border-box">
<table style="border-collapse: collapse;width: 600px">
<caption style="margin-bottom: 20px;font-size: 30px;font-weight: bolder">基本特征</caption>
<tr>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder;">編号(新)</td>
<td style="padding:13px;border: 1px solid #000;">asd</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">編号(原)</td>
<td style="padding:13px;border: 1px solid #000;">sdff</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">災害類型</td>
<td style="padding:13px;border: 1px solid #000;">ffff</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">管道樁号</td>
<td style="padding:13px;border: 1px solid #000;">asdas</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">風險等級</td>
<td style="padding:13px;border: 1px solid #000;">較低</td>
</tr>
<tr >
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">地理位置</td>
<td style="padding:13px;border: 1px solid #000;" colspan="4">新聞</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">基本特征</td>
<td style="padding:13px;border: 1px solid #000;" colspan="4">
阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴。
</td>
</tr>
<tr>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">部門1</td>
<td style="padding:13px;border: 1px solid #000;">1</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">部門2</td>
<td style="padding:13px;border: 1px solid #000;" colspan="3">2</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">部門3</td>
<td style="padding:13px;border: 1px solid #000;" colspan="3">3</td>
</tr>
<tr>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">專家1</td>
<td style="padding:13px;border: 1px solid #000;"> </td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">電話</td>
<td style="padding:13px;border: 1px solid #000;"> </td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">機關</td>
<td style="padding:13px;border: 1px solid #000;">公司</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">機關聯系人</td>
<td style="padding:13px;border: 1px solid #000;">人</td>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">聯系人電話</td>
<td style="padding:13px;border: 1px solid #000;">152113201100</td>
</tr>
<tr>
<td style="padding:13px;border: 1px solid #000;font-weight: bolder">照片</td>
<td style="padding:13px;border: 1px solid #000;" colspan="9">
<img src="傳感器.png" alt="柳池鄉大郎家灣崩塌:cqdsDZBT007">
</td>
</tr>
</table>
</div>
<!--<a class="word-export" href="javascript:void(0)"> 導出 </a>-->
</body>
<script src="../js/jQuery.js"></script>
<script src="../js/fileSaver.js"></script>
<script src="../js/jquery.wordexport.js"></script>
<script>
jQuery(document).ready(function ($) {
let $content = $(``)
$("#download").click(function (event) {
$("#page_content").wordExport('123');
});
});
</script>
</html> 運作結果：
下載下傳後world文檔内容：
![jQuery實作百度搜尋框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)