使用Vue-Office实现Office文件预览组件

# 根据需求安装对应组件
npm install @vue-office/docx @vue-office/excel @vue-office/pdf
# 或
yarn add @vue-office/docx @vue-office/excel @vue-office/pdf

<template>
  <div>
    <vue-office-docx 
      :src="docxFile" 
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'

export default {
  components: {
    VueOfficeDocx
  },
  data() {
    return {
      docxFile: 'https://example.com/document.docx' // 支持URL或ArrayBuffer
    }
  },
  methods: {
    renderedHandler() {
      console.log('文档渲染完成')
    },
    errorHandler(e) {
      console.error('渲染失败', e)
    }
  }
}
</script>

<vue-office-docx 
  :src="file"
  :options="{
    style: `
      body {
        font-family: 'Microsoft YaHei';
      }
      .docx-wrapper {
        background: #f5f5f5;
        padding: 20px;
      }
    `
  }"
/>

<template>
  <div>
    <button @click="currentComponent = 'docx'">Word</button>
    <button @click="currentComponent = 'excel'">Excel</button>
    <button @click="currentComponent = 'pdf'">PDF</button>
    
    <component 
      :is="'vue-office-' + currentComponent" 
      :src="file"
    />
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'

export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  data() {
    return {
      currentComponent: 'docx',
      file: '' // 根据类型设置对应文件
    }
  }
}
</script>

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <vue-office-docx :src="fileArrayBuffer" v-if="fileArrayBuffer" />
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'

export default {
  components: {
    VueOfficeDocx
  },
  data() {
    return {
      fileArrayBuffer: null
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onload = () => {
        this.fileArrayBuffer = reader.result
      }
    }
  }
}
</script>

// 在options中覆盖默认样式
options: {
  style: `
    /* 自定义样式 */
  `,
  ignoreFonts: false // 是否忽略文档自带字体
}

options: {
  style: `
    * {
      font-family: 'Microsoft YaHei', sans-serif !important;
    }
  `
}