当前位置： 首页 > ai >正文

前端docx库实现将html页面导出word

ai 2025/7/15 7:08:44

前言：最近遇到一个需求，需要将页面的html导出为word文档，并且包含横向和竖向页面，并且可以进行混合方向导出。经过一段时间的实验，发现只有docx这个库满足这个要求。在这里记录一下实现思路以及代码。

docx官网

一、效果展示

页面内容：
在这里插入图片描述
导出样式：
在这里插入图片描述

二、解决思路

1、首先是需要在页面上设置哪些部分是需要横向导出，哪些部分是需要竖向导出的。以方便后面进行解析。
2、根据页面样式以及各类html标签进行解析。然后以docx的形式生成，最后导出来。

三、实现代码

1、index.vue

这里 class 中的 section 代表了docx中的一节，也就是一个页面。同时newpage属性控制了是不是要换一个新页，orient属性是页面横向纵向的标识（Z纵向H横向）。也可以根据自己的需求自行添加属性，在后面自己进行对应的解析。

<template><div><el-row><el-col :span="24"><div><el-button type="primary" @click="exportToWord" style="float: right">导出</el-button></div><div style="overflow-y: auto; height: calc(85vh)" id="export"><div class="section" orient="Z"><h1 style="text-align: center">这里是标题1</h1></div><div class="section" orient="Z" newpage="true"><h2 style="text-align: center">这里是标题2</h2><h3 style="text-align: center">这里是标题3</h3></div><div class="section" orient="Z"><p>这里是一段文字内容</p></div><div class="section" orient="Z"><el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"><el-table-column prop="id" label="ID" width="180" header-align="center" align="left"/><el-table-column prop="name" label="姓名" width="" header-align="center" align="left"/><el-table-column prop="amount1"  label="列 1" width="" header-align="center" align="center"/><el-table-column prop="amount2"  label="列 2" width="" header-align="center" align="right"/><el-table-column prop="amount3"  label="列 3" width="" header-align="center" align="left"/></el-table></div><div class="section" orient="H"><p>这里是横向页面内容</p></div><div class="section" orient="Z"><p>这里是纵向页面内容</p></div></div></el-col></el-row></div>
</template>
<script lang="ts" setup="" name="">
//导出用
import * as htmlDocx from 'html-docx-js-typescript';
import { saveAs } from 'file-saver';
import { exportDocxFromHTML } from '@/utils/exportWord';
//导出word
const exportToWord = async () => {let contentElement = document.getElementById('export') as HTMLElement;// 克隆元素 操作新元素let newDiv = contentElement.cloneNode(true) as HTMLElement;// 这里可以对newDiv进行一些操作...exportDocxFromHTML(newDiv, `test.docx`);
};
import type { TableColumnCtx } from 'element-plus'interface User {id: stringname: stringamount1: stringamount2: stringamount3: number
}interface SpanMethodProps {row: Usercolumn: TableColumnCtx<User>rowIndex: numbercolumnIndex: number
}const tableData:User[] = [{id: '12987122',name: 'Tom',amount1: '234',amount2: '3.2',amount3: 10,},{id: '12987123',name: 'Tom',amount1: '165',amount2: '4.43',amount3: 12,},{id: '12987124',name: 'Tom',amount1: '324',amount2: '1.9',amount3: 9,},{id: '12987125',name: 'Tom',amount1: '621',amount2: '2.2',amount3: 17,},{id: '12987126',name: 'Tom',amount1: '539',amount2: '4.1',amount3: 15,},
];
const arraySpanMethod = ({row,column,rowIndex,columnIndex,
}: SpanMethodProps) => {if (rowIndex % 2 === 0) {if (columnIndex === 0) {return [1, 2]} else if (columnIndex === 1) {return [0, 0]}}
}onMounted(async () => {});
</script><style lang="scss" scoped></style>

2、exportWord.ts

这个部分是进行了html转换成docx形式的拼接组合。可以根据理解自行调整样式以及解析过程。

import {Document,Packer,Paragraph,TextRun,ImageRun,ExternalHyperlink,WidthType,VerticalAlign,AlignmentType,PageOrientation,HeadingLevel,Table,TableRow,TableCell,BorderStyle,
} from 'docx';
import { saveAs } from 'file-saver';
/*** 字符串是否为空* @param {*} obj* @returns*/
export function isEmpty(obj:any) {if (typeof obj == 'undefined' || obj == null || obj === '') {return true} else {return false}
};
import { ElMessageBox, ElMessage } from 'element-plus';
// 定义类型
type DocxElement = Paragraph | Table | TextRun | ImageRun | ExternalHyperlink;//保存图片，表格，列表
type ExportOptions = {includeImages: boolean;includeTables: boolean;includeLists: boolean;
};
const includeImages = ref(true);
const includeTables = ref(true);
const includeLists = ref(true);
//保存样式对象
type StyleOptions = {bold: boolean; //是否加粗font: Object; //字体样式size: number; //字体大小id: String | null; //样式id
};
//横向A4
export const H_properties_A4 = {page: {size: {width: 15840, // A4 横向宽度 (11英寸)height: 12240, // A4 横向高度 (8.5英寸)},},
};
//纵向A4
export const Z_properties_A4 = {page: {size: {width: 12240, // A4 纵向宽度 (8.5英寸 * 1440 twip/inch)height: 15840, // A4 纵向高度 (11英寸 * 1440)},orientation: PageOrientation.LANDSCAPE,},
};
//根据html生成word文档
export const exportDocxFromHTML = async (htmlDom: any, filename: any) => {let sections = [] as any; //页面数据let doms = htmlDom.querySelectorAll('.section');try {const options: ExportOptions = {includeImages: includeImages.value,includeTables: includeTables.value,includeLists: includeLists.value,};let preorient = 'Z';for (let i = 0; i < doms.length; i++) {let dom = doms[i];let orient = dom.getAttribute('orient');let newpage = dom.getAttribute('newpage');if (orient == preorient && newpage != 'true' && sections.length > 0) {//方向一致且不分页,继续从上一个section节添加// 获取子节点let childNodes = dom.childNodes;// 递归处理所有节点let children = [];for (let i = 0; i < childNodes.length; i++) {const node = childNodes[i];const result = await parseNode(node, options, null);children.push(...result);}if (sections[sections.length - 1].children && children.length > 0) {for (let c = 0; c < children.length; c++) {let one = children[c];sections[sections.length - 1].children.push(one);}}} else {//否则则新开一个section节// 获取子节点let childNodes = dom.childNodes;// 递归处理所有节点let children = [];for (let i = 0; i < childNodes.length; i++) {const node = childNodes[i];const result = await parseNode(node, options, null);children.push(...result);}let section = {properties: orient == 'H' ? H_properties_A4 : Z_properties_A4,children: children,};sections.push(section);preorient = orient;}}if (sections.length > 0) {// 创建Word文档const doc = new Document({styles: {default: {heading1: {//宋体 二号run: {size: 44,bold: true,italics: true,color: '000000',font: '宋体',},paragraph: {spacing: {after: 120,},},},heading2: {//宋体 小二run: {size: 36,bold: true,color: '000000',font: '宋体',},paragraph: {spacing: {before: 240,after: 120,},},},heading3: {//宋体 四号run: {size: 28,bold: true,color: '000000',font: '宋体',},paragraph: {spacing: {before: 240,after: 120,},},},heading4: {//宋体run: {size: 24,bold: true,color: '000000',font: '宋体',},paragraph: {spacing: {before: 240,after: 120,},},},heading5: {run: {size: 20,bold: true,color: '000000',font: '宋体',},paragraph: {spacing: {before: 240,after: 120,},},},},paragraphStyles: [{id: 'STx4Style', // 样式IDname: '宋体小四号样式', // 可读名称run: {font: '宋体', // 字体size: 24, // 字号},paragraph: {spacing: { line: 360 }, // 1.5倍行距(240*1.5=360)indent: { firstLine: 400 }, // 首行缩进400twips(约2字符)},},{id: 'THStyle', // 样式IDname: '表头样式', // 可读名称run: {font: '等线', // 字体size: 20.5, // 字号},paragraph: {spacing: {before: 240,after: 120,},},},{id: 'TDStyle', // 样式IDname: '单元格样式', // 可读名称run: {font: '等线', // 字体size: 20.5, // 字号},// paragraph: {// 	spacing: {// 		before: 240,// 		after: 120,// 	},// },},],},sections: sections, //.filter(Boolean) as (Paragraph | Table)[],});// 生成并下载文档await Packer.toBlob(doc).then((blob) => {saveAs(blob, filename);});} else {ElMessage.error('导出失败，该页面没有要导出的信息！');}} catch (error) {console.error('导出失败:', error);ElMessage.error('导出失败，请联系管理人员！'); //查看控制台获取详细信息!');} finally {}
};
// 递归转换 DOM 节点为 docx 元素
export const parseNode = async (node: Node, options: ExportOptions, style: any): Promise<DocxElement[]> => {const elements: DocxElement[] = [];// 1、处理文本节点if (node.nodeType === Node.TEXT_NODE) {const text = node.textContent?.trim();if (!isEmpty(text)) {const parent = node.parentElement;if (style == null) {let child = new TextRun({text: text,});elements.push(child);} else {const isBold = style.bold ? true : parent?.tagName === 'STRONG' || parent?.tagName === 'B';// const isItalic = parent?.tagName === 'EM' || parent?.tagName === 'I';// const isUnderline = parent?.tagName === 'U';const Font = style.font ? style.font : '宋体';const Size = style.size ? style.size : 24;if (!isEmpty(style.id)) {let child = new TextRun({text: text,style: style.id,});elements.push(child);} else {let child = new TextRun({text: text,bold: isBold,font: Font,size: Size,});elements.push(child);}}}return elements;}// 2、处理元素节点if (node.nodeType === Node.ELEMENT_NODE) {const element = node as HTMLElement;const tagName = element.tagName.toUpperCase();const childNodes = element.childNodes;// 递归处理子节点let childElements: DocxElement[] = [];for (let i = 0; i < childNodes.length; i++) {const child = childNodes[i];if (tagName == 'A') {if (style == null) {style = {id: 'Hyperlink',};} else {style.id = 'Hyperlink';}}const childResult = await parseNode(child, options, style);childElements = childElements.concat(childResult);}// 根据标签类型创建不同的docx元素switch (tagName) {case 'H1':return [new Paragraph({heading: HeadingLevel.HEADING_1,alignment: AlignmentType.CENTER,children: childElements.filter((e) => e instanceof TextRun) as TextRun[],}),];case 'H2':return [new Paragraph({heading: HeadingLevel.HEADING_2,alignment: AlignmentType.CENTER,children: childElements.filter((e) => e instanceof TextRun) as TextRun[],}),];case 'H3':return [new Paragraph({heading: HeadingLevel.HEADING_3,alignment: AlignmentType.LEFT,children: childElements.filter((e) => e instanceof TextRun) as TextRun[],}),];case 'H4':return [new Paragraph({heading: HeadingLevel.HEADING_4,alignment: AlignmentType.LEFT,children: childElements.filter((e) => e instanceof TextRun) as TextRun[],}),];case 'H5':return [new Paragraph({heading: HeadingLevel.HEADING_5,alignment: AlignmentType.LEFT,children: childElements.filter((e) => e instanceof TextRun) as TextRun[],}),];case 'P':return [new Paragraph({children: childElements.filter((e) => e instanceof TextRun) as TextRun[],style: 'STx4Style', // 应用样式ID}),];case 'BR':return [new TextRun({ text: '', break: 1 })];case 'A':const href = element.getAttribute('href');if (href) {return [new Paragraph({children: [new ExternalHyperlink({children: childElements.filter((e) => e instanceof TextRun) as TextRun[],link: href,}),],}),];} else {return childElements.filter((e) => e instanceof TextRun) as TextRun[];}case 'TABLE':return getTable(element, options);// case 'IMG':// 	if (!options.includeImages) {// 		return [];// 	} else {// 		const src = element.getAttribute('src');// 		if (src) {// 			try {// 				const response = await fetch(src);// 				const arrayBuffer = await response.arrayBuffer();// 				// return [// 				// 	new ImageRun({// 				// 		data: arrayBuffer,// 				// 		transformation: {// 				// 			width: 400,// 				// 			height: 300,// 				// 		},// 				// 	}),// 				// ];// 				return [];// 			} catch (e) {// 				console.error('图片加载失败:', e);// 				return [// 					new TextRun({// 						text: '[图片加载失败]',// 						color: 'FF0000',// 					}),// 				];// 			}// 		} else {// 			return [];// 		}// 	}// case 'I':// 	return childElements.map((e) => {// 		if (e instanceof TextRun) {// 			return new TextRun({// 				...e.options,// 				italics: true,// 			});// 		}// 		return e;// 	});// case 'U':// 	return childElements.map((e) => {// 		if (e instanceof TextRun) {// 			return new TextRun({// 				...e.options,// 				underline: {},// 			});// 		}// 		return e;// 	});default:return childElements;}}return elements;
};
//获取一个表格
export const getTable = async (element: any, options: ExportOptions) => {if (!options.includeTables) {return [];} else {const rows = Array.from(element.rows);const tableRows = rows.map((row: any) => {const cells = Array.from(row.cells);const tableCells = cells.map(async (cell: any, index: any) => {let textAlign = cell.style.textAlign; //居中/居左let width = (cell.style.width + '').replace('%', ''); //宽度let classlist = Array.from(cell.classList);if (classlist && classlist.length > 0) {if (classlist.indexOf('is-left') > -1) {textAlign = 'left';} else if (classlist.indexOf('is-center') > -1) {textAlign = 'center';} else if (classlist.indexOf('is-right') > -1) {textAlign = 'right';}}const cellChildren = [];for (let i = 0; i < cell.childNodes.length; i++) {let childNode = cell.childNodes[i];if (cell.tagName == 'TH') {const styleoption: StyleOptions = {bold: true,font: '等线',size: 21,id: null,};const result = await parseNode(childNode, options, styleoption);cellChildren.push(new Paragraph({alignment: textAlign == 'center' ? AlignmentType.CENTER : textAlign == 'right' ? AlignmentType.RIGHT : AlignmentType.LEFT, // 水平居中/居右/居左children: result,style: 'THStyle',}));} else {const styleoption: StyleOptions = {bold: false,font: '等线',size: 21,id: null,};const result = await parseNode(childNode, options, styleoption);cellChildren.push(new Paragraph({alignment: textAlign == 'center' ? AlignmentType.CENTER : textAlign == 'right' ? AlignmentType.RIGHT : AlignmentType.LEFT, // 水平居中/居右/居左children: result,style: 'TDStyle',}));}}// 动态判断是否合并//const isMergedStart = cell.rowSpan > 1 || cell.colSpan > 1;return new TableCell({rowSpan: cell.rowSpan,columnSpan: cell.colSpan,verticalAlign: VerticalAlign.CENTER,verticalMerge: cell.rowSpan > 1 ? 'restart' : undefined,width: {size: parseFloat(width), // 设置第一列宽度为250type: WidthType.PERCENTAGE, //WidthType.DXA, // 单位为twip (1/20 of a point)},children: cellChildren.filter((e) => e instanceof Paragraph) as Paragraph[],});// return new TableCell({// 	children: cellChildren.filter((e) => e instanceof Paragraph) as Paragraph[],// });});return Promise.all(tableCells).then((cells) => {return new TableRow({children: cells,});});});return Promise.all(tableRows).then((rows) => {return [new Table({rows: rows,width: { size: 100, type: WidthType.PERCENTAGE },}),];});}
};
http://www.xdnf.cn/news/15298.html

相关文章：

  • 【第一章编辑器开发基础第二节编辑器布局_3间距控制（4/4）】
  • Java 大视界 -- 基于 Java 的大数据可视化在城市地下管网管理与风险预警中的应用
  • 显示器核心三要素详解：刷新率、分辨率、色深
  • SpringBoot-26-企业云端开发实践之Vue框架状态管理VueX和数据模拟MockJS
  • 从零构建搜索引擎 build demo search engine from scratch
  • MIPI DSI(三) MIPI DSI 物理层和 D-PHY
  • MMpretrain 中的 LinearClsHead 结构与优化
  • C++标准库（std）详解
  • 1.连接MySQL数据库-demo
  • 蜻蜓I即时通讯水银版系统直播功能模块二次开发文档-详细的直播功能模块文档范例-卓伊凡|麻子
  • 第十八篇 数据清洗：Python智能筛选与统计：从海量Excel数据中秒级挖掘，辅助决策！你的数据分析利器！
  • hash表的模拟--开放定址法
  • C++模版编程：类模版与继承
  • 力扣 hot100 Day43
  • 2025.7.13总结
  • 代码部落 20250713 CSP-S复赛 模拟赛
  • 芯片相关必备
  • [附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
  • 型模块化协作机器人结构设计cad【1张】三维图＋设计说明书
  • MCU中的系统控制器（System Controller）是什么？
  • [Rust 基础课程]Hello World
  • CCPD 车牌数据集提取标注，并转为标准 YOLO 格式
  • LAN-401 linux操作系统的移植
  • 【leetcode】字符串，链表的进位加法与乘法
  • Matlab的命令行窗口内容的记录-利用diary记录日志/保存命令窗口输出
  • Linux 系统——管理 MySQL
  • TDengine 使用最佳实践（2）
  • Java集合框架深度解析：LinkedList vs ArrayList 的对决
  • Autotab：用“屏幕录制”训练AI助手，解锁企业级自动化新范式
  • 复习笔记 35