Instructions
- The introduction of the required js files
are successively introduced:jQuery.js,fileSaver.js,jquery.wordexport.js
fileSaver Download: fileSaver
jquery.wordexport Download: wordexport - Parse the required content into a table
- Use the
$("#page_content").wordExport(表名);command to download, the default is to save it locally, the table name can not be passed, the default is jQuery-Word-Export
Use attention
- When downloading fileSaver, if the js file in the dist directory reports an error, you can use the js file in the src directory.
- If you save the style as an external style or an embedded style, you may not be able to reference it when you download it, so the inline css style is directly used in the case.
Case code
<!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>
operation result:
The content of the world document after downloading:
