指示
- ファイルが必要なJSの導入
を順次導入されていますjQuery.js、fileSaver.js、jquery.wordexport.js
fileSaverダウンロード：fileSaver
jquery.wordexportダウンロード：wordexport - 必要なコンテンツをテーブルに解析します
$("#page_content").wordExport(表名);コマンドを使用してダウンロードします。デフォルトではローカルに保存され、テーブル名を渡すことはできません。デフォルトはjQuery-Word-Exportです。
注意してください
- 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>
動作結果：
ダウンロード後のワールドドキュメントのコンテンツ：
