word表格转换html 并导出.docx和图片（vue）

一、复制word表格转换成html代码，在页面中显示并且能导出

1、导出使用了htmlDocx插件

//1、使用html-docx-js 插件
npm install html-docx-js --save
npm install html2canvas
//2、在页面中引入
import htmlDocx from 'html-docx-js/dist/html-docx.js';
import html2canvas from "html2canvas";

2、开始写代码 (以下代码包含生成word以及生成图片)

特别注意，关于页面大小（A4，页面边距是无法改变的我多次尝试没什么效果我的方法是定义好表格宽高人工对生成的word进行改变）

<template><div><div><el-select v-model="typesettingType"><el-option v-for="item in typesettingTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option></el-select><span>请在下面区域粘贴 Word 表格</span></div><div class="controls" style="overflow: hidden">请在此区域粘贴 Word 表格（typesettingType 为页面方向 1为竖向 <span> </span><divstyle="margin: 0 auto; box-sizing: border-box"class="paste-area":style="`width: ${typesettingType == 1 ? 210 : 297}mm !important;padding:25.4mm 19.1mm`"contenteditable="true"id="content"ref="content"@paste="handlePaste"></div></div><el-button @click="exportToWord">导出为 Word</el-button><el-button @click="downloadImage">导出为 图片</el-button></div>
</template><script>
import htmlDocx from 'html-docx-js/dist/html-docx.js';
import html2canvas from 'html2canvas';
export default {data() {return {updatedHtml: '',typesettingType: 1,typesettingTypeOptions: [{ label: '竖向 A4', value: 1, pageWidth: 210 },{ label: '横向 A4', value: 2, pageWidth: 297 }]};},mounted() {this.typesettingType = 1;},methods: {//下载图片downloadImage() {const container = this.$refs.content;const outputDiv = container.querySelector('table');// 使用 html2canvas 将内容转为图片html2canvas(outputDiv, {scale: 1, // 提高图片的分辨率，默认为1，设置为2 3 可以使图片更清晰最多好像到4logging: false, // 禁用日志输出useCORS: true, // 允许跨域图像allowTaint: true // 允许污染 canvas，解决图片链接不可用问题})// 清空现有内容，显示图片.then((canvas) => {// 创建一个图片对象const imgData = canvas.toDataURL('image/png');// 创建一个链接并下载图片const link = document.createElement('a');link.href = imgData;link.download = 'image.png';link.click();});},async handlePaste(event) {setTimeout(() => {var content = this.$refs.content;console.log('content at line 51:', content);if (content) {const updatedHtml = this.setHtmlWord();this.updatedHtml = updatedHtml.match(/<table[\s\S]*?<\/table>/i)[0];this.$refs.content.innerHTML = this.updatedHtml;console.log('updatedHtml at line 114:', this.updatedHtml);}}, 1000);},//判断内容是否有上下标containsSupOrSub(element) {// 如果当前节点是元素节点if (element.nodeType === 1) {// 如果是 <sup> 或 <sub> 标签，返回 trueif (element.tagName === 'SUP' || element.tagName === 'SUB') {return true;}// 否则，递归检查子节点return Array.from(element.childNodes).some((child) => this.containsSupOrSub(child));}// 如果不是元素节点（如文本节点），返回 falsereturn false;},setHtmlWord() {var setHtmlWord = this.$refs.content.outerHTML;const html = setHtmlWord.replace(/<(table)([^>]*style="([^"]*)")/g, // 匹配有 style 属性的 <table>(match, p1, p2, p3) => {const existingStyle = p3;// 如果现有样式不为空，则在原样式后追加新的样式const updatedStyle = existingStyle? existingStyle +`; width: ${this.typesettingType == 1 ? '488' : '736'}pt !important;`: `width: ${this.typesettingType == 1 ? '488' : '736'}pt !important;`;var str = `<table${p2.replace(`style="${existingStyle}"`, `style="${updatedStyle}"`)}`;return str;}).replace(/style="style=;/g, 'style="').replace(/;;/g, ';').replace(/\n/g, '<br>');const container = document.createElement('div');container.innerHTML = html;const AllTd = container.querySelectorAll('table td'); // 获取 <tr> 中的所有 <td> 元素// 遍历所有 <td> 元素，添加上下边框样式AllTd.forEach((td) => {const currentStyle = td.getAttribute('style');if (currentStyle) {td.setAttribute('style',currentStyle +';color:#000000 !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;');} else {td.setAttribute('style','color:#000000 !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;');}});const firstRowTdElements = container.querySelectorAll('tr:first-child td'); // 获取第一个 <tr> 中的所有 <td> 元素// 遍历所有 <td> 元素，添加上下边框样式firstRowTdElements.forEach((td) => {const currentStyle = td.getAttribute('style');if (currentStyle) {td.setAttribute('style',currentStyle +';color:#000000 !important; border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;');} else {td.setAttribute('style','color:#000000 !important;border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;');}});const firstRowTdElementsLast = container.querySelectorAll('tr:last-of-type td');// 遍历所有 <td> 元素，添加上下边框样式firstRowTdElementsLast.forEach((td) => {// 获取当前的 style 属性（如果有）const currentStyle = td.getAttribute('style');// 如果已有 style 属性，则追加边框样式；如果没有 style 属性，则设置新的 styleif (currentStyle) {td.setAttribute('style',currentStyle + ';border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;');} else {td.setAttribute('style','border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;');}});// 获取修改后的 HTML 内容const updatedHtml = container.innerHTML;return updatedHtml;},//导出wordexportToWord() {const tableHtml = `<html xmlns:w="urn:schemas-microsoft-com:office:word"><body><div align="center">${this.$refs.content.innerHTML}</div></body></html>`;console.log('tableHtml at line 150:', tableHtml);const converted = htmlDocx.asBlob(tableHtml); // 将 HTML 转换为 Word Blob// 触发文件下载const link = document.createElement('a');link.href = URL.createObjectURL(converted);link.download = 'table.docx';link.click();}}
};
</script><style scoped>
table {border-collapse: collapse;width: 100%;margin: 20px 0;
}th,
td {border: 1px dashed #dcdfe6;padding: 8px;text-align: center;position: relative;
}
table {border-top: 2px solid #000;border-bottom: 1px solid #000;
}
th {border-bottom: 1px solid #000;
}
th input,
td input {width: 100%;border: none;outline: none;text-align: center;
}
th input,
td input ::placeholder {color: #aaa !important;
}.controls {margin: 0 0 20px;
}.drag-handle {cursor: move;
}
::v-deep .paste-area {height: auto; /* A4纸高度 */background: white; /* 纸张背景 */box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影模拟纸张浮起 */border: 1px solid #ddd; /* 模拟纸张边框 *//* padding: 25.4mm 19.1mm; //内边距 */box-sizing: border-box; /* 确保内边距不会影响整体尺寸 */transform-origin: top left;
}
::v-deep .paste-area table {/* border-top: 2px solid #000 !important; *//* border-bottom: 1px solid #000 !important; */margin-left: 0 !important;margin-right: 0 !important;margin: 0 auto !important;
}
::v-deep .paste-area table td {border-top: none !important;border-bottom: none !important;border: 1px dashed #dcdfe6 !important;/* display: flex;align-items: center; */
}
::v-deep .paste-area table td p {display: flex;align-items: center;
}
::v-deep .paste-area table .MsoNormal {max-width: 200px !important; /* 限制容器宽度 */word-wrap: break-word !important;overflow-wrap: break-word !important;
}
.text-container {position: relative;padding: 20px;border: 1px solid #ccc;margin: 20px;font-size: 16px;line-height: 1.5;
}
</style>