文件预览

参考地址1 参考地址2

在线文档获取

1、docx

• npm i @vue-office/docx
• yarn add @vue-office/docx

<template>
  <VueOfficeDocx
    :src="previewSrc"
    :style="comStyle"
    @rendered="renderedHandler"
    @error="errorHandler" />
</template>

<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
//引入相关样式
import '@vue-office/docx/lib/index.css';
import { ref } from 'vue';
const previewSrc = ref(
  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx'
);
const comStyle = ref({ width: '100%' });

function renderedHandler() {
  console.log('渲染成功后调用');
}
function errorHandler() {
  console.log('渲染失败后调用');
}
</script>

<style lang="scss" scoped>
:deep(.docx-wrapper) {
  background: none;
}
</style>