【覺得有用的小伙伴最后點(diǎn)個(gè)贊吧蟹蟹】
1. 下載
npm/cnpm install htmldocx ：直接報(bào)錯(cuò)GET 404 Not found，我用的下載指令是 npm/cnpm install html-docx-js, 然后可以下載一個(gè)保存文件的插件file-saver昌妹，當(dāng)然你用傳統(tǒng)的創(chuàng)建a標(biāo)簽再打開一樣可行瞧哟，親測可用俗孝。
2. 避坑
2.1 引用
網(wǎng)上說 這樣引用import htmlDocx from "htmldocx"; 我是發(fā)現(xiàn)不好使，后來我找了一下node_modules包下面的html-docx-js 改成這樣引用：import htmlDocx from 'html-docx-js/dist/html-docx'; import { saveAs } from 'file-saver';
2.2 html
結(jié)合jQuery的開發(fā)方式直接寫html 包括css樣式，我沒有采用獲取id元素轉(zhuǎn)化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">抽檢報(bào)告</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">業(yè)務(wù)名稱</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業(yè)務(wù)</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">抽檢條數(shù)</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">人工抽檢時(shí)間</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">短信抽檢結(jié)果及意見</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">抽檢短信標(biāo)識情況：</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;">短信標(biāo)識(代碼)</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">全量條數(shù)</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">抽檢條數(shù)</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">合計(jì)</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">報(bào)告時(shí)間：${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 內(nèi)容轉(zhuǎn)換為 Blob 對象
const blob = htmlDocx.asBlob(htmlContent)
saveAs(blob, '導(dǎo)出.docx')
}
}
}
