前端實現文件預覽(支援word、ppt、pdf)-【@zuiyouliao/vue-file-viewer】

^Mao^發表於2024-08-07
前端UIVueView

背景

有的時候我們需要在前端頁面上預覽某些文件，文件的格式比如：word、ppt、pdf、圖片等等

實現方案

可以使用@zuiyouliao/vue-file-viewer第三方庫，官方地址

方式1：透過元件方式引入

優點：word/圖片可以識別，方便快捷。
缺點:pdf/pptx檔案無法識別。

安裝依賴

npm install --save @zuiyouliao/vue-file-viewer

vue中使用

<template>
  <div class="app">
    <vue-file-viewer :fileUrl="file" style="height: 500px" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // file: 'https://home.me7.cn/fileTest/word.docx',
      // file: 'https://home.me7.cn/fileTest/pdf.pdf',
      // file: 'http://localhost:3000/public/ddd.pptx',
      file: 'http://localhost:3000/public/test.jpg',
    }
  },
}
</script>

<style lang="less" scoped></style>

方式2：透過iframe嵌入此庫構建後的產物，透過連結的方式

下載原始碼編譯構建後的產物

https://github.com/zyl-ui/vue-file-viewer/tree/master/public/file-viewer

將構建後的產物放在 public資料夾下。

vue檔案程式碼

<template>
  <div class="app">
    <iframe
      src="./file-viewer/index.html?fileUrl=https://home.me7.cn/fileTest/pdf.pdf"
      scrolling="auto"
      style="border: 0; height: 500px; width: 100%"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="less" scoped></style>

效果

總結

推薦採用方式2，此方式透過iframe中嵌入構建後的html然後實現對文件的預覽。

注意：在vue或者webpack專案中我們需要對這塊構建後的html，使用複製外掛將此內容複製到打包後的檔案中。vue專案中`public`目錄的內容會在打包的時候會原封不動的複製，但是在webpack專案的話你需要使用`copy-webpack-plugin`進行復制

相關文章