vue3中做文件预览的项目实践

npm i @vue-office/docx
或者
yarn add @vue-office/docx

<vue-office-docx
 :src="previewSrc"
 :style="comStyle"
 @rendered="renderedHandler"
 @error="errorHandler"
/>

<script setup>
//	获取父组件传递的资源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
//引入VueOfficeDocx组件相关
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
</script>

npm i @vue-office/excel
或者
yarn add @vue-office/excel

<vue-office-excel
 :src="previewSrc"
 :style="comStyle"
 @rendered="renderedHandler"
 @error="errorHandler"
/>

<script setup>
//	获取父组件传递的资源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
//引入VueOfficeExcel组件相关
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
</script>

   <iframe
      :src="previewSrc"
    ></iframe>

<script setup>
//	获取父组件传递的资源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
</script>

npm i vue3-video-play
或者
yarn add vue3-video-play

// 视频播放器组件
import App from './App'
const app = createApp(App)
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)

<vue3VideoPlay
  width="100%"
  title="钢铁侠"
  :src="previewSrc"
  :poster="options.poster"
  @play="onPlay"
  @pause="onPause"
  @timeupdate="onTimeupdate"
  @canplay="onCanplay"
/>

<script setup>
  <script setup>
import { reactive } from 'vue';

const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  },
});
console.log('资源地址：',props.previewSrc);
const options = reactive({
//   src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  poster: '', //封面
})
const onPlay = (ev) => {
//   console.log('播放')
}
const onPause = (ev) => {
//   console.log(ev, '暂停')
}
const onTimeupdate = (ev) => {
//   console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
//   console.log(ev, '可以播放')
}
</script>

**模版代码块里面**
```javascript
<audio
   controls
   controlsList="nodownload"
   style="width: 100%;"
 >
   <source
     :src="previewSrc"
     type="audio/mp3"
   >
   您的浏览器不支持audio标签。
 </audio>

<script setup>
//	获取父组件传递的资源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
</script>