当前位置：首页 > VUE

vue实现word文档

2026-03-28 17:06:33VUE

使用vue-office库生成Word文档

vue-office是一个专门用于Vue.js的库，支持Word、Excel和PDF文档的在线预览和导出。安装依赖：

npm install @vue-office/docx vue-demi

创建Word导出组件：

<template>
  <button @click="exportToDocx">导出Word</button>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import { saveAs } from 'file-saver'

export default {
  components: {
    VueOfficeDocx
  },
  methods: {
    exportToDocx() {
      const content = '<h1>标题</h1><p>这是Word文档内容</p>'
      VueOfficeDocx.renderAsync(content).then(blob => {
        saveAs(blob, 'document.docx')
      })
    }
  }
}
</script>

使用docx.js库创建复杂Word文档

docx.js提供了更精细的Word文档控制能力。安装依赖：

npm install docx

创建带格式的文档：

import { Document, Paragraph, TextRun, Packer } from 'docx'

export default {
  methods: {
    async generateDocx() {
      const doc = new Document({
        sections: [{
          properties: {},
          children: [
            new Paragraph({
              children: [
                new TextRun({
                  text: "标题",
                  bold: true,
                  size: 28
                })
              ]
            }),
            new Paragraph({
              children: [
                new TextRun({
                  text: "正文内容",
                  size: 24
                })
              ]
            })
          ]
        }]
      })

      const blob = await Packer.toBlob(doc)
      saveAs(blob, "document.docx")
    }
  }
}

使用html-docx-js转换HTML

将HTML转换为Word文档：

npm install html-docx-js

实现代码：

import htmlDocx from 'html-docx-js/dist/html-docx'

export default {
  methods: {
    exportHtmlToWord() {
      const html = `
        <h1>文档标题</h1>
        <p>段落内容</p>
        <ul>
          <li>项目1</li>
          <li>项目2</li>
        </ul>
      `
      const converted = htmlDocx.asBlob(html)
      saveAs(converted, 'document.docx')
    }
  }
}

服务端生成方案

对于大型应用，可以考虑服务端生成：

// 客户端
axios.post('/api/generate-word', {
  content: '文档内容'
}, { responseType: 'blob' })
.then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]))
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', 'document.docx')
  document.body.appendChild(link)
  link.click()
})

// 服务端(Node.js示例)
const express = require('express')
const { Document, Paragraph, TextRun, Packer } = require('docx')

app.post('/api/generate-word', async (req, res) => {
  const doc = new Document({
    sections: [{
      children: [
        new Paragraph({
          children: [new TextRun(req.body.content)]
        })
      ]
    }]
  })

  const buffer = await Packer.toBuffer(doc)
  res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
  res.send(buffer)
})

模板化解决方案

创建可复用的Word模板：

vue实现word文档

// templates.js
export const reportTemplate = (data) => ({
  sections: [{
    children: [
      new Paragraph({
        children: [new TextRun({
          text: data.title,
          bold: true
        })]
      }),
      ...data.items.map(item => new Paragraph({
        children: [new TextRun(item)]
      }))
    ]
  }]
})

// 组件中使用
import { reportTemplate } from './templates'

const doc = new Document(reportTemplate({
  title: '月度报告',
  items: ['项目A', '项目B', '项目C']
}))

以上方案可根据项目需求选择，vue-office适合简单预览和导出，docx.js适合复杂格式控制，服务端方案适合处理大量数据，模板化方法适合需要标准格式的场景。