前端使用 docx 库实现 HTML 页面导出 Word 文档

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';
import { ElMessageBox, ElMessage } from 'element-plus';

/**
 * 字符串是否为空
 * @param {*} obj
 * @returns
 */
export function isEmpty(obj: any) {
  if (typeof obj === 'undefined' || obj == null || obj === '') {
    return true;
  } else {
    return false;
  }
}

// 定义类型
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 j = 0; j < childNodes.length; j++) {
          const node = childNodes[j];
          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 j = 0; j < childNodes.length; j++) {
          const node = childNodes[j];
          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', // 样式 ID
              name: '宋体小四号样式', // 可读名称
              run: {
                font: '宋体', // 字体
                size: 24, // 字号
              },
              paragraph: {
                spacing: {
                  line: 360, // 1.5 倍行距 (240*1.5=360)
                }, // indent: { firstLine: 400 }, // 首行缩进 400twips(约 2 字符)
              },
            },
            {
              id: 'THStyle', // 样式 ID
              name: '表头样式', // 可读名称
              run: {
                font: '等线', // 字体
                size: 20.5, // 字号
              },
              paragraph: {
                spacing: {
                  before: 240,
                  after: 120,
                },
              },
            },
            {
              id: 'TDStyle', // 样式 ID
              name: '单元格样式', // 可读名称
              run: {
                font: '等线', // 字体
                size: 20.5, // 字号
              },
            },
          ],
        },
        sections: sections,
      });
      // 生成并下载文档
      await Packer.toBlob(doc).then((blob) => {
        saveAs(blob, filename);
      });
    } else {
      ElMessage.error('导出失败，该页面没有要导出的信息！');
    }
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出失败，请联系管理人员！');
  }
};

// 递归转换 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 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 [
          newParagraph({
            heading: HeadingLevel.HEADING_1,
            alignment: AlignmentType.CENTER,
            children: childElements.filter((e) => e instanceof TextRun) as TextRun[],
          }),
        ];
      case 'H2':
        return [
          newParagraph({
            heading: HeadingLevel.HEADING_2,
            alignment: AlignmentType.CENTER,
            children: childElements.filter((e) => e instanceof TextRun) as TextRun[],
          }),
        ];
      case 'H3':
        return [
          newParagraph({
            heading: HeadingLevel.HEADING_3,
            alignment: AlignmentType.LEFT,
            children: childElements.filter((e) => e instanceof TextRun) as TextRun[],
          }),
        ];
      case 'H4':
        return [
          newParagraph({
            heading: HeadingLevel.HEADING_4,
            alignment: AlignmentType.LEFT,
            children: childElements.filter((e) => e instanceof TextRun) as TextRun[],
          }),
        ];
      case 'H5':
        return [
          newParagraph({
            heading: HeadingLevel.HEADING_5,
            alignment: AlignmentType.LEFT,
            children: childElements.filter((e) => e instanceof TextRun) as TextRun[],
          }),
        ];
      case 'P':
        return [
          newParagraph({
            children: childElements.filter((e) => e instanceof TextRun) as TextRun[],
            style: 'STx4Style', // 应用样式 ID
          }),
        ];
      case 'BR':
        return [newTextRun({ text: '', break: 1 })];
      case 'A':
        const href = element.getAttribute('href');
        if (href) {
          return [
            newParagraph({
              children: [
                newExternalHyperlink({
                  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);
      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(
              newParagraph({
                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(
              newParagraph({
                alignment:
                  textAlign == 'center'
                    ? AlignmentType.CENTER
                    : textAlign == 'right'
                    ? AlignmentType.RIGHT
                    : AlignmentType.LEFT, // 水平居中/居右/居左
                children: result,
                style: 'TDStyle',
              })
            );
          }
        }
        // 动态判断是否合并
        return newTableCell({
          rowSpan: cell.rowSpan,
          columnSpan: cell.colSpan,
          verticalAlign: VerticalAlign.CENTER,
          verticalMerge: cell.rowSpan > 1 ? 'restart' : undefined,
          width: {
            size: parseFloat(width), // 设置第一列宽度为 250
            type: WidthType.PERCENTAGE, //WidthType.DXA, // 单位为 twip (1/20 of a point)
          },
          children: cellChildren.filter((e) => e instanceof Paragraph) as Paragraph[],
        });
      });
      return Promise.all(tableCells).then((cells) => {
        return newTableRow({ children: cells });
      });
    });
    return Promise.all(tableRows).then((rows) => {
      return [
        newTable({
          rows: rows,
          width: {
            size: 100,
            type: WidthType.PERCENTAGE,
          },
        }),
      ];
    });
  }
};