使用方法
-
-
引入所需要的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=)