使用vue-office预览word文档的功能详解

//docx文档预览组件
npm install @vue-office/docx vue-demi

<template>
  <a-button @click="handlePreview" :loading="loading">导出文档</a-button>
  <a-drawer
      v-model:open="open"
      class="custom-class"
      width="80%"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      title="预览"
      placement="right"
      @after-open-change="afterOpenChange"
  >
    <template #extra>
      <a-button style="margin-right: 8px" @click="handleDownload">下载</a-button>
    </template>
    <vue-office-docx :src="docx" @rendered="rendered"/>
  </a-drawer>
</template>
<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import {exportWord} from "@/api/exportWord/index.js";
import {ref} from "vue";

const docx = ref('')
const open = ref(false)
const loading = ref(false)
const handlePreview = () => {
  loading.value = true
  exportWord({}).then(res => {
    const url = window.URL.createObjectURL(new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}));
    docx.value = url;
    open.value = true
  }).finally(() => {
    loading.value = false
  })
}

const rendered = () => {
  console.log('rendered')
}

const afterOpenChange = () => {
  console.log('afterOpenChange')
}

const handleDownload = () => {
  // 获取该word文档并下载
  const link = document.createElement('a');
  link.href = docx.value;
  link.setAttribute('download', 'export.docx'); // 设置下载文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>
<style scoped>
:deep(.docx-wrapper) {
  background-color: #ffffff;
}

:deep(.docx) {
  width: 100% !important;
}
</style>

import http from "@/utils/server/http.js";

export const exportWord = (data) => {
    return http.post('/exportWord', data, {responseType: 'blob'})
}