前端页面导出word
html-docx-js bug:
vite使用html-docx.js会报错，点击下载上方文件替换即可
正文
npm install html-docx-js -S
npm install file-saver -S
<template><div id="managerReport">word内容......</div>
</template><script><a-button type="primary" @click="wordDownload"> 导出 </a-button>function wordDownload() {const htmlContent = document.getElementById('managerReport');// 查找并修改表格的样式const tables = htmlContent.querySelectorAll('table');tables.forEach((table) => {table.style.borderCollapse = 'collapse';table.style.width = '100%';table.querySelectorAll('td, th').forEach((cell, index) => {if (cell) {cell.style.border = '1px solid black';cell.style.padding = '8px';}});});//去除<br>标签，内容加到<div>标签内const brs = htmlContent.querySelectorAll('br');brs.forEach((br) => {const parent = br.parentNode; //获取父节点let textNode = br.previousSibling; //前一个兄弟节点// while (textNode && textNode.nodeType !== Node.TEXT_NODE) {// textNode = textNode.previousSibling; //循环查找，直到找到一个文本节点或没有更多的兄弟节点// }if (textNode && textNode.nodeType === Node.TEXT_NODE && textNode.textContent.trim()) {//找到文本节点，并且内容不为空const div = document.createElement('div');div.textContent = textNode.textContent;parent.insertBefore(div, br);parent.removeChild(textNode); //移除原有的文本节点，避免内容重复} else {const div = document.createElement('div');div.innerHTML = ' ';parent.insertBefore(div, br);}parent.removeChild(br);});const htmlContentCopy = htmlContent.cloneNode(true);const imgs = htmlContentCopy.querySelectorAll('img');imgs.forEach((img) => {let docxWidth = 620;if (img.width > docxWidth) {img.height = (img.height * docxWidth) / img.width;img.width = docxWidth;}});// 将HTML转换为Blob对象const blob = asBlob(htmlContentCopy.innerHTML);saveAs(blob, `aaaaa.docx`);}</script>