Vue和HTMLDocx：实现文档导出的高效方式和技巧

npm install htmldocx

import htmlDocx from 'htmldocx'

<button @click="exportDocument">导出文档</button>

methods: {
  exportDocument() {
    // 获取文档内容的HTML
    const content = document.getElementById('document-content').innerHTML
    
    // 使用HTMLDocx转换HTML为docx格式
    const docx = htmlDocx.asBlob(content)
    
    // 创建一个docx文件链接
    const fileUrl = URL.createObjectURL(docx)
    
    // 创建一个a标签并下载文档
    const link = document.createElement('a')
    link.href = fileUrl
    link.download = 'document.docx'
    link.click()
    
    // 释放URL对象
    URL.revokeObjectURL(fileUrl)
  }
}

<button @click="exportTable">导出表格</button>

methods: {
  exportTable() {
    // 获取表格内容的HTML
    const tableContent = this.$refs.tableContent.innerHTML
    
    // 创建一个包含表格的HTML
    const content = `<table>${tableContent}</table>`
    
    // 使用HTMLDocx转换HTML为docx格式
    const docx = htmlDocx.asBlob(content)
    
    // ...创建并下载文档的代码逻辑
  }
}

<style scoped>
  .table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .table th, .table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
</style>

methods: {
  exportTable() {
    // ...获取表格内容的HTML
    
    // 将表格内容放入一个具有样式的div
    const content = `
      <div>
        <style scoped>
          .table {
            border-collapse: collapse;
            width: 100%;
          }
  
          .table th, .table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
          }
        </style>
        <table class="table">${tableContent}</table>
      </div>
    `
    
    // ...使用HTMLDocx转换HTML为docx格式，并下载文档
  }
}