jquery.exportWord.js实现word的导出
1. 脚本如下
需要引入jquery.min.js,FileSaver.min.js和jquery.wordexport.js(注意顺序)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/786443/jquery.wordexport.js"></script>
</head>
<body>
<input type="button" id="test_button" value="导出word"></div>
<div style="padding: 0 30%;">
<h1 style="text-align: center">总标题</h1>
<table style="border-collapse:collapse;width: 100%;" border="1">
<tr>
<td>
<h2 style="text-align: center;">标题一</h2>
<span>1.</span><br>
<span>2.</span><br>
<span>3.</span><br>
<span>4.</span><br>
<span>5.</span><br>
<span>6.</span><br>
<span>7.</span><br>
<span>8.</span><br>
</td>
</tr>
<tr>
<td>
<h2 style="text-align: center">标题二</h2>
<span>1.</span><br>
<span>2.</span><br>
<span>3.</span><br>
<span>4.</span><br>
<span>5.</span><br>
<span>6.</span><br>
<span>7.</span><br>
<span>8.</span><br>
</td>
</tr>
</table>
</div>
</body>
<script>
// tmp取值为html源码的压缩,可以通过这种方式来构造导出的word样式而不影响前端界面
// 不需要的可以给div标签加个id然后使用jquery选择这个标签调用wordExport方法
var tmp = '<div style="padding: 0 30%;"><h1 style="text-align: center">总标题</h1><table style="border-collapse:collapse;width: 100%;"border="1"><tr><td><h2 style="text-align: center;">标题一</h2><span>1.</span><br><span>2.</span><br><span>3.</span><br><span>4.</span><br><span>5.</span><br><span>6.</span><br><span>7.</span><br><span>8.</span><br></td></tr><tr><td><h2 style="text-align: center">标题二</h2><span>1.</span><br><span>2.</span><br><span>3.</span><br><span>4.</span><br><span>5.</span><br><span>6.</span><br><span>7.</span><br><span>8.</span><br></td></tr></table></div>'
$("#test_button").click(function () {
$(tmp).wordExport("test")
})
</script>
</html>