<template>
  <div class="docx-preview">
    <vue-office-docx :src="src" @render-error="handleDocxError" />
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';

export default {
  name: "DocxPreview",
  components: {
    VueOfficeDocx
  },
  props: {
    src: {
      type: String,
      required: true,
      description: "Word文件的URL或路径"
    }
  },
  methods: {
    handleDocxError(err) {
      console.error('docx预览失败:', err);
      this.$message.error('文档预览失败，请下载查看');
    }
  }
};
</script>

<style scoped>
.docx-preview {
  width: 100%;
  height: 70vh;
  overflow-y: auto;
}
</style>