以vue3为基础,针对常见文件类型做项目内的预览功能
涉及到的文件类型有docx,xlsx,pdf,txt,png,jpg,jpeg,mp4,mp3,
这里你可能会疑惑为什么docx,xlsx都支持,为啥不顺带支持下doc和docx呢???
这里我也表示很难啊,针对老版本格式的文档,没有合适的解决方案,如果说一定要有,那就只能是通过下载的方式本地预览了 ┭┮﹏┭┮
开整开整~
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>
运行成功之后展示