【觉得有用的小伙伴最后点个赞吧蟹蟹】
1. 下载
npm/cnpm install htmldocx ：直接报错GET 404 Not found，我用的下载指令是 npm/cnpm install html-docx-js, 然后可以下载一个保存文件的插件file-saver，当然你用传统的创建a标签再打开一样可行，亲测可用。
2. 避坑
2.1 引用
网上说 这样引用import htmlDocx from "htmldocx"; 我是发现不好使，后来我找了一下node_modules包下面的html-docx-js 改成这样引用：import htmlDocx from 'html-docx-js/dist/html-docx'; import { saveAs } from 'file-saver';
2.2 html
结合jQuery的开发方式直接写html 包括css样式，我没有采用获取id元素转化html的方式：const htmlContent = document.getElementById("app"); const blob = htmlDocx.asBlob(htmlContent.outerHTML);
3. 上代码
<script>
import htmlDocx from 'html-docx-js/dist/html-docx'
import { saveAs } from 'file-saver'
export default {
methods: {
createDocx () {
let mun = 100
let month = 12
let mun2 = 50
let proportion = 80
let time = '2024/04/01 23:59:59'
let remark = '备注备注备注备注'
let reportTime = '2024年4月28日'
const htmlContent = `
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="generator" content="Aspose.Words for .NET 15.1.0.0">
<title></title>
</head>
<body>
<div>
<h1 style="font-size:22pt; line-height:115%; margin:24pt 0pt 0pt; page-break-after:avoid; page-break-inside:avoid; text-align:center">
<span style="font-family:宋体; font-size:22pt; font-weight:normal">抽检报告</span>
</h1>
<p style="margin:0pt 0pt 0pt 18pt"><span style="font-family:宋体; font-size:12pt"> </span></p>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin-left:0pt">
<tbody>
<tr style="height:32pt">
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:61.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">业务名称</span></p>
</td>
<td colspan="4" style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:381.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">XXX业务</span></p>
</td>
</tr>
<tr style="height:28pt">
<td colspan="5" style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:453.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">采用XXX短信抽检模板</span></p>
</td>
</tr>
<tr style="height:20pt">
<td rowspan="2" style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:61.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">短信抽检</span></p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:61.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">短信总量</span></p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:94.2pt">
<p style="margin:0pt">
<span style="font-family:宋体; font-size:12pt">${mun}条(${month}月)</span>
</p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:61.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">抽检条数</span></p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:132.2pt">
<p style="margin:0pt">
<span style="font-family:宋体; font-size:12pt">${mun2}条，抽检比例${proportion}％</span>
</p>
</td>
</tr>
<tr style="height:20pt">
<td colspan="2" style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:147.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">人工抽检时间</span></p>
</td>
<td colspan="2" style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:223.2pt">
<p style="margin:0pt">
<span style="font-family:宋体; font-size:12pt">${time}</span>
</p>
</td>
</tr>
<tr style="height:110.65pt">
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:61.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt">短信抽检结果及意见</span></p>
</td>
<td colspan="4" style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:381.2pt">
<ol type="1" style="margin:0pt; padding-left:0pt">
<li style="font-family:Cambria; font-size:12pt; margin:0pt 0pt 0pt 14.11pt; padding-left:3.89pt; text-indent:0pt">
<span style="font-family:宋体; font-size:12pt">抽检短信标识情况：</span>
</li>
</ol>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin-left:0pt">
<tbody>
<tr>
<td style="border-bottom-color:#000000; border-bottom-style:dotted; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#bfbfbf; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:105.35pt">
<p style="margin:0pt; text-align:center">
<span style="font-family:宋体; font-size:10.5pt; font-weight:bold; line-height: 14pt;">短信标识(代码)</span>
</p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:dotted; border-bottom-width:0.75pt; border-left-color:#bfbfbf; border-left-style:solid; border-left-width:0.75pt; border-right-color:#bfbfbf; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:105.35pt">
<p style="margin:0pt; text-align:center">
<span style="font-family:宋体; font-size:10.5pt; font-weight:bold">全量条数</span>
</p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:dotted; border-bottom-width:0.75pt; border-left-color:#bfbfbf; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:105.35pt">
<p style="margin:0pt; text-align:center">
<span style="font-family:宋体; font-size:10.5pt; font-weight:bold">抽检条数</span>
</p>
</td>
</tr>
<tr>
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#bfbfbf; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:dotted; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:105.35pt">
<p style="margin:0pt; text-align:center">
<span style="font-family:宋体; font-size:10.5pt; font-weight:bold">合计</span>
</p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#bfbfbf; border-left-style:solid; border-left-width:0.75pt; border-right-color:#bfbfbf; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:dotted; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:105.35pt">
<p style="margin:0pt; text-align:center">
<span style="font-family:宋体; font-size:12pt">20</span>
</p>
</td>
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#bfbfbf; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:dotted; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:top; width:105.35pt">
<p style="margin:0pt; text-align:center">
<span style="font-family:宋体; font-size:12pt">50</span>
</p>
</td>
</tr>
</tbody>
</table>
<p style="margin:0pt 0pt 0pt 18pt"><span style="font-family:宋体; font-size:12pt"> </span></p>
<ol start="2" type="1" style="margin:0pt; padding-left:0pt">
<li style="font-family:Cambria; font-size:12pt; margin:0pt 0pt 0pt 14.11pt; padding-left:3.89pt; text-indent:0pt">
<span style="font-family:宋体; font-size:12pt">抽检人员填写(备注): </span>
<span style="font-family:宋体; font-size:12pt">${remark}</span>
</li>
</ol>
</td>
</tr>
<tr style="height:25.15pt">
<td style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:61.2pt">
<p style="margin:0pt"><span style="font-family:宋体; font-size:12pt"> </span></p>
</td>
<td colspan="4" style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.03pt; padding-right:5.03pt; vertical-align:middle; width:381.2pt">
<p style="line-height:28.6pt; margin:0pt 0pt 1pt; text-align:right">
<span style="font-family:宋体; font-size:12pt">报告时间：${reportTime}</span>
</p>
</td>
</tr>
<tr style="height:0pt">
<td style="width:72pt; border:none"></td>
</tr>
</tbody>
</table>
<p style="line-height:28.6pt; margin:0pt 0pt 1pt 180pt; text-align:justify; text-indent:36pt"><span style="font-family:宋体; font-size:15pt"> </span></p>
</div>
</body>
</html>
`
this.exportHtmlToWord(htmlContent)
},
exportHtmlToWord (htmlContent) {
// 将 HTML 内容转换为 Blob 对象
const blob = htmlDocx.asBlob(htmlContent)
saveAs(blob, '导出.docx')
}
}
}
