快捷導(dǎo)航

vue3中做文件預(yù)覽的項(xiàng)目實(shí)踐

更新時(shí)間：2025年01月13日 10:48:43 作者：孫懟懟啊

本文主要介紹了在Vue3項(xiàng)目中實(shí)現(xiàn)常見文件類型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價(jià)值,感興趣的可以了解一下

這里你可能會(huì)疑惑為什么docx，xlsx都支持，為啥不順帶支持下doc和docx呢？？？
這里我也表示很難啊，針對(duì)老版本格式的文檔，沒有合適的解決方案，如果說一定要有，那就只能是通過下載的方式本地預(yù)覽了 ┭┮﹏┭┮

開整開整~

1. docx文檔預(yù)覽解決方案

安裝下依賴這里呢我用的是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：渲染完成后調(diào)用
error：渲染失敗后調(diào)用

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

script 標(biāo)簽內(nèi)

<script setup>
//	獲取父組件傳遞的資源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
//引入VueOfficeDocx組件相關(guān)
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
</script>

運(yùn)行成功之后展示

在這里插入圖片描述

2. xlsx文檔預(yù)覽解決方案

安裝下依賴這里呢我用的是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：渲染完成后調(diào)用
error：渲染失敗后調(diào)用

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

script 標(biāo)簽內(nèi)

<script setup>
//	獲取父組件傳遞的資源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
//引入VueOfficeExcel組件相關(guān)
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
</script>

運(yùn)行成功之后展示

在這里插入圖片描述

3. pdf&txt文檔預(yù)覽解決方案

無需安裝依賴這里呢采用的是iframe方式來展示，因?yàn)槟豬frame是自帶支持pdf和txt的

模版代碼塊里面這里呢支持的屬性分別介紹下

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

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

script 標(biāo)簽內(nèi)

<script setup>
//	獲取父組件傳遞的資源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
</script>

運(yùn)行成功之后展示

在這里插入圖片描述

4. video文檔預(yù)覽解決方案

安裝下依賴這里呢我用的是1.3.2版本

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

可以選擇在入口文件里面導(dǎo)入一下

// 視頻播放器組件
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)

這里導(dǎo)入的時(shí)候回存在一個(gè)問題，就是依賴包引入的路徑回有問題，會(huì)導(dǎo)致項(xiàng)目在運(yùn)行的時(shí)候報(bào)錯(cuò)。這里給出解決方案======》需要將依賴包中package.json文件中的’module’改為"./dist/index.mjs"

在這里插入圖片描述

模版代碼塊里面

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

script 標(biāo)簽內(nèi)

<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, '時(shí)間更新')
}
const onCanplay = (ev) => {
//   console.log(ev, '可以播放')
}
</script>

運(yùn)行成功之后展示

在這里插入圖片描述

5. audio（MP3等）文檔預(yù)覽解決方案

這里呢?zé)o需要裝第三方依賴，使用audio標(biāo)簽

**模版代碼塊里面**
```javascript
<audio
   controls
   controlsList="nodownload"
   style="width: 100%;"
 >
   <source
     :src="previewSrc"
     type="audio/mp3"
   >
   您的瀏覽器不支持audio標(biāo)簽。
 </audio>

script 標(biāo)簽內(nèi)

<script setup>
//	獲取父組件傳遞的資源url
const props = defineProps({
  previewSrc: {
    type: String,
    required: false,
    default: () => ''
  }
});
</script>

運(yùn)行成功之后展示

在這里插入圖片描述