那些在Docx.js踩过的坑

一、依赖篇

npm i --save docx@8.5.0
npm i --save file-saver

二、导出篇

// 必须的导入包
import FileSaver, { saveAs } from 'file-saver'
import {
  Document,
  Packer
} from 'docx'

const doc = new Document({.............});

// 导出代码

Packer.toBlob(doc).then((blob) => {
  saveAs(blob, `${name}.docx`);
});

三、Document篇

• sections: readonly ISectionOptions[]：定义文档的节（section）。每个节可以有不同的布局和格式。（下面所有的都放在sections:{ children:[ new 段落, new 表格........... ] }）

• title?: string：文档的标题。

• subject?: string：文档的主题。

• creator?: string：文档的创建者。

• keywords?: string：与文档相关的关键字，用于搜索和索引。

• description?: string：文档的描述。

• lastModifiedBy?: string：最后修改文档的用户。

• revision?: number：文档的修订版本号。

• externalStyles?: string：外部样式表的链接。

• styles?: IStylesOptions：自定义的样式选项，定义文档中的样式。

• numbering?: INumberingOptions：定义文档的编号格式（如段落编号、列表编号）。

• comments?: ICommentsOptions：文档的评论设置。

• footnotes?: { readonly [key: string]: { readonly children: readonly Paragraph[]; }; }：脚注设置，允许在文档中添加脚注内容。

• background?: IDocumentBackgroundOptions：文档背景选项，允许设置文档的背景样式。

• features?: { readonly trackRevisions?: boolean; readonly updateFields?: boolean; }：文档特性选项：

  • updateFields: 是否在打开文档时更新字段。
  • trackRevisions: 是否跟踪修订。

• compatibilityModeVersion?: number：兼容模式版本号，用于确保文档在不同版本的 Word 中的兼容性。

• compatibility?: ICompatibilityOptions：其他兼容性选项，用于控制文档的行为。

• customProperties?: readonly ICustomPropertyOptions[]：自定义属性，允许添加额外的元数据到文档中。

• evenAndOddHeaderAndFooters?: boolean：是否使用不同的页眉和页脚用于奇数和偶数页。

• defaultTabStop?: number：默认制表位，控制制表符的停靠位置。

• fonts?: readonly FontOptions[]：字体选项，定义文档中使用的字体。

四、段落篇

        new Paragraph({                    //需要导入
          text: `姓名：${name}`,
          heading: HeadingLevel.HEADING_1, // 需要导入HeadingLevel
          alignment: AlignmentType.CENTER, // 需要导入AlignmentType
          children:[
            new TextRun("66666"),          // 需要导入TextRun
            new TextRun("随便输入"),
          ]
        }),

效果如下:

注意：Paragraph不能嵌套Table！！！

五、表格篇

        new Table({
          // 文件页边距为默认设置时, 表格总宽度最佳为9010
          // 567 = 1cm
          layout: TableLayoutType.FIXED, // 确保列宽被应用, 这样下面的columnWidths属性才会生效
          columnWidths: [1021, 1815, 1758, 2098, 2098],
          rows: [
            new TableRow({
              children: [
                new TableCell({
                  children: [new Paragraph("1行1列")],
                  verticalAlign: VerticalAlign.CENTER  // 单元格垂直居中，需要导入VerticalAlign
                }),
                new TableCell({
                  children: [new Paragraph("1行2列")],
                  verticalAlign: VerticalAlign.CENTER
                }),
                new TableCell({
                  children: [new Paragraph("1行3列")],
                  verticalAlign: VerticalAlign.CENTER
                }),
                new TableCell({
                  children: [new Paragraph("1行4列")],
                  verticalAlign: VerticalAlign.CENTER
                }),
                new TableCell({
                  children: [new Paragraph("1行5列")],
                  verticalAlign: VerticalAlign.CENTER
                })
              ],
              height: {
                value: 397, // '0.7cm'    // 行高为0.7cm
                rule: TableRowHeight.ATLEAST     // 需要导入TableRowHeight，表示至少0.7cm
              }
            }),
            new TableRow({
              children: [
                new TableCell({
                  children: [new Paragraph("2行1列")],
                  verticalAlign: VerticalAlign.CENTER  // 单元格垂直居中，需要导入VerticalAlign
                }),
                new TableCell({
                  children: [new Paragraph("2行2列")],
                  verticalAlign: VerticalAlign.CENTER
                }),
                new TableCell({
                  children: [new Paragraph("2行3列")],
                  verticalAlign: VerticalAlign.CENTER
                }),
                new TableCell({
                  children: [new Paragraph("2行4列")],
                  verticalAlign: VerticalAlign.CENTER
                }),
                new TableCell({
                  children: [new Paragraph("2行5列")],
                  verticalAlign: VerticalAlign.CENTER
                })
              ],
              height: {
                value: 397, // '0.7cm'
                rule: TableRowHeight.ATLEAST
              }
            }),
          ]
        }),

效果如下：

注意：Paragraph不能嵌套Table！！！可以利用ES6语法 ...arr 自定义多行最后写rows[...arr]就可以

六、持续更新...