前端使用docx插件导出word文档

插件下载

npm install docx

npm install file-saver

实际使用

创建一个Document对象初始化一张word文档，添加sections进行内容填充,文档内容填充到children内。 children内放置常用的word 属性（对象）Paragraph，Text,Images,Table 。。。 具体内容按照实际情况填充

文件引入

    import { saveAs } from 'file-saver' //save the file
    import { Document, Packer, Paragraph, TextRun } from "docx";

基础示例

const test = () => {
    const doc = new Document({
        sections: [
            {
                properties: {},
                children: [
                    new Paragraph({
                        children: [
                            new TextRun({
                                text: "Hello there",
                                bold: true,
                            })
                        ],
                    }),
                    new Paragraph({
                        children: [
                            new TextRun({
                                text: "try export & save this word docx!",
                                bold: true,
                            }),
                        ]
                    }),
                ],
            },
        ],
    })
    
    Packer.toBlob(doc).then((blob) => {
        saveAs(blob, `test.docx`)
    })
}

具体示例

const test1 = () => {

    //基础用法生成段落
    const paragraph = new Paragraph({
        text: "Short hand notation for adding text.",
    });

    //生成段落 根据options进行配置
    const generateParagraph = (options: any) => {
        let {
            text = '',
            bold = true,
            size = 32,
            margin = {
                left: 50,
                right: 50,
                top: 100,
                bottom: 100
            },
            breakPage = false
        } = options
        let P = new Paragraph({
            children: [
                new TextRun({
                    text,
                    bold,
                    size,
                    font: {
                        name: '仿宋' // 只要是word中有的字体类型都可以生效
                    }
                })
            ],
            // 离左边距离 类似于margin-left
            indent: {
                left: margin?.left
            },
            // 离上边和下边的距离 类似于margin-top/bottom
            spacing: {
                before: margin?.top,
                after: margin?.bottom
            },
            // 是否在这段文字前加入分页符
            pageBreakBefore: breakPage
        })
        return P
    }

    let textList = [
        'this is first paragraph',
        'this is second paragraph',
        'this is third paragraph',
    ]
    let paragraphList = textList.map(e => {
        let opt = {
            text: e
        }
        return generateParagraph(opt)
    })

    //按照数据填充生成文档 内容放置于sections 
    const doc = new Document({
        sections: [
            {
                properties: {},
                children: paragraphList,
            },
        ],
    })

    //保存导出为word
    Packer.toBlob(doc).then((blob) => {
        saveAs(blob, `test1.docx`)
    })
}

导出效果

最后附上docx的官方文档 docx.js.org/#/

需要的内容可以根据文档内不同部分进行使用，基本覆盖常用的word文档功能