vue项目：纯前端实现Word文档导出功能，使用第三方库生成word表格 合并单元格 导出手写复杂表格，并百分百还原word表格，一文搞定前端表格导出为word。
一、先看效果：
纯前端手撸格式，只需要有数据就行。
二、使用的库：
"file-saver": "^2.0.5", "html-docx-js-typescript": "^0.1.5",
准备开始下包
npm install html-docx-js-typescript npm install file-saver
三、创建一个JS文件：
最好是utils目录下 方便多次使用，文件名字随意 ，并把方法向外导出
import { saveAs } from "file-saver";
import { asBlob } from "html-docx-js-typescript";
export function downloadWordWithHtmlString(html, name) {
let htmlString = `
Document
${html}
`;
asBlob(htmlString).then((data) => {
saveAs(data, `${name}.docx`);
});
}
四、开始使用：
1.准备数据：
const tableDataList = ref([
{
department: "销售A部",
data: [
{
employee: "张三",
job: "经理",
lastMonth: 0.311,
thisMonth: 2.687,
total: 422.8,
remark: '在职',
},
{
employee: "李四",
job: "经理",
lastMonth: 3.704,
thisMonth: 32.0026,
total: 3250.7994,
remark: '在职',
},
{
employee: "王五",
job: "经理",
lastMonth: 1.588,
thisMonth: 13.7203,
total: 5133.14,
remark: '实习',
},
{
employee: "赵六",
job: "经理",
lastMonth: 0.83,
thisMonth: 7.1712,
total: 1680.8951,
remark: '在职',
},
],
},
{
department: "销售B部",
data: [
{
employee: "员工1",
job: "经理",
lastMonth: 6,
thisMonth: 51.84,
total: 13289.56,
remark: '在职',
},
{
employee: "员工2",
job: "经理",
lastMonth: 0,
thisMonth: 0,
total: 16.12,
remark: '已离职',
},
{
employee: "员工3",
job: "经理",
lastMonth: 17.2,
thisMonth: 148.608,
total: 19075.17,
remark: '在职',
},
],
},
{
department: "销售C部",
data: [
{
employee: "职员A",
job: "经理",
lastMonth: 4.62,
thisMonth: 39.9168,
total: 1812.23,
remark: '实习',
},
{
employee: "职员B",
job: "经理",
lastMonth: 7.911,
thisMonth: 68.351,
total: 7818.68,
remark: '在职',
},
],
},
]);
2.书写模板：
2024年11月销售单
填报单位：XXX外贸公司
单位：万元
| 部门 | 员工 | 职位 | 业绩 | 全年销售总额 | 备注 | |
| 上月 | 本月 | |||||
| {{ item.department }} | {{ item.data[0].employee }} | {{ item.data[0].job }} | {{ item.data[0].lastMonth }} | {{ item.data[0].thisMonth }} | {{ item.data[0].total }} | {{ item.data[0].remark }} |
| {{ itemB.employee }} | {{ itemB.job }} | {{ itemB.lastMonth }} | {{ itemB.thisMonth }} | {{ itemB.total }} | {{ itemB.remark }} | |
3.开始使用导出功能：
准备一个按钮
导出Word
引入方法：
import { downloadWordWithHtmlString } from '../utils/word.js';
点击按钮的时候 导出word
// 导出Word文档
const exportWord = () => {
downloadWordWithHtmlString(wordRef.value.innerHTML, '销售单');
};
五、完整代码：
import { saveAs } from "file-saver";
import { asBlob } from "html-docx-js-typescript";
export function downloadWordWithHtmlString(html, name) {
let htmlString = `
Document
${html}
`;
asBlob(htmlString).then((data) => {
saveAs(data, `${name}.docx`);
});
}
导出Word
2024年11月销售单
填报单位：XXX外贸公司
单位：万元
| 部门 | 员工 | 职位 | 业绩 | 全年销售总额 | 备注 | |
| 上月 | 本月 | |||||
| {{ item.department }} | {{ item.data[0].employee }} | {{ item.data[0].job }} | {{ item.data[0].lastMonth }} | {{ item.data[0].thisMonth }} | {{ item.data[0].total }} | {{ item.data[0].remark }} |
| {{ itemB.employee }} | {{ itemB.job }} | {{ itemB.lastMonth }} | {{ itemB.thisMonth }} | {{ itemB.total }} | {{ itemB.remark }} | |
六、注意事项：
你可以根据需要为表格添加样式，例如设置边框、背景色、字体大小等。
样式比较难调，我使用了行内样式，在标签上直接加style属性，样式单独拉出来不行，会没有效果，最好的方法就是写在行内样式，虽然比较冗余。
当时用了好几个库，大多都是不支持合并单元格，固定写死的模板，可控性差一些。这个还算是比较可控制的，毕竟是手撸table，反正是业务需求达到了。
具体情况还是看需求哦
七、其他的方法：
如果你有固定的导出模板，且不需要动态的合并单元格，只需要填充字段即可，那你可以参看这一篇文章：
vue项目：纯前端实现Word文档导出功能，一文搞定前端导出word文档，固定的word模板导出。-CSDN博客
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。
