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

更新时间：2025年01月13日 10:48:43 作者：孙怼怼啊

本文主要介绍了在Vue3项目中实现常见文件类型的预览功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的参考价值,感兴趣的可以了解一下

开整开整~

1. docx文档预览解决方案

安装下依赖这里呢我用的是1.6.2版本

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

模版代码块里面这里呢支持的属性分别介绍下

src：资源路径http://116.228.88.26:52800/nymanagerFile/group1/M00/00/B8/rBwWM2aGQyCAGisxAAqcqJw-Cq468.docx
style:自定义样式
rendered：渲染完成后调用
error：渲染失败后调用

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

script 标签内

<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>

运行成功之后展示

在这里插入图片描述

2. xlsx文档预览解决方案

安装下依赖这里呢我用的是1.7.8版本

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

模版代码块里面这里呢支持的属性分别介绍下

src：资源路径http://116.228.88.26:52800/nymanagerFile/group1/M00/00/B8/rBwWM2aGQyCAGisxAAqcqJw-Cq468.xlsx
style:自定义样式
rendered：渲染完成后调用
error：渲染失败后调用

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

script 标签内

<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>

运行成功之后展示

在这里插入图片描述

3. pdf&txt文档预览解决方案

无需安装依赖这里呢采用的是iframe方式来展示，因为呢iframe是自带支持pdf和txt的

模版代码块里面这里呢支持的属性分别介绍下

src：资源路径http://116.228.88.26:52800/nymanagerFile/group1/M00/00/B8/rBwWM2aGQyCAGisxAAqcqJw-Cq468.pdf

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

script 标签内

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

运行成功之后展示

在这里插入图片描述

4. video文档预览解决方案

安装下依赖这里呢我用的是1.3.2版本

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)

这里导入的时候回存在一个问题，就是依赖包引入的路径回有问题，会导致项目在运行的时候报错。这里给出解决方案======》需要将依赖包中package.json文件中的’module’改为"./dist/index.mjs"

在这里插入图片描述

模版代码块里面

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

script 标签内

<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>

运行成功之后展示

在这里插入图片描述

5. audio（MP3等）文档预览解决方案

这里呢无需要装第三方依赖，使用audio标签

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

script 标签内

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

运行成功之后展示

在这里插入图片描述

到此这篇关于vue3中做文件预览的项目实践的文章就介绍到这了,更多相关vue3 文件预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现表格打印功能
常见的打印有JavaScript打印、jQuery、vue打印,这里主要讲述vue使用vue-print-nb进行打印,废话不多说,直接手摸手上代码,感兴趣的朋友可以参考下
2024-01-01
详解Vue如何实现响应式布局
这篇文章主要为大家详细介绍了Vue实现响应式布局的两种方法,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
2023-12-12
vue路由切换之淡入淡出的简单实现
今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue中导出Excel表格的实现代码
项目中我们可能会碰到导出Excel文件的需求，这篇文章主要介绍了vue中导出Excel表格的实现代码，非常具有实用价值，需要的朋友可以参考下
2018-10-10
vue3 ref获取不到子组件的解决方法
在父组件内调用子组件内的事件从而改变子组件的某些状态,父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问其内部事件,本文给大家介绍了vue3 ref获取不到子组件的解决方法,需要的朋友可以参考下
2024-06-06
在vue中使用el-tab-pane v-show/v-if无效的解决
这篇文章主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue使用websocket实现实时数据推送功能
这篇文章主要为大家详细介绍了vue如何使用websocket实现实时数据推送,发布订阅重连单点登录功能,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
vue中利用mqtt服务端实现即时通讯的步骤记录
前些日子了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,所以下面这篇文章主要给大家介绍了关于vue中如何利用mqtt服务端实现即时通讯的相关资料,需要的朋友可以参考下
2021-07-07
vue中多个文件下载实现打包压缩下载示例
这篇文章主要为大家介绍了vue中多个文件下载实现打包压缩下载的发发示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
这篇文章主要介绍了vue实现动态给id赋值,点击事件获取当前点击的元素的id操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11