記錄---前端如何實現檔案的線上預覽？

林恒發表於2024-11-21

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

在計算機的世界中，有各種各樣的檔案，檔案型別千奇百怪，作為一名前端開發工程師，我們如何來實現這些檔案的線上預覽呢？在這篇文章，我們已經實現了前端如何實現壓縮包解析？，但是也僅僅是能夠檢視壓縮包中的內容，並不能真實的去進行線上預覽，這節就是在檔案的基礎上，舉例一些我們日常經常接觸的檔案來進行預覽：

文字類檔案（雖然型別很多，但是處理方式基本都是一樣的）

 const txtType = ['txt','html','htm','asp','jsp','js','xml','json','properties','md','gitignore','log','java','py','c','cpp','sql','sh','bat','m','bas','prg','cmd','vue','ts','tsx','yml','yaml','css',];

圖片const pictureType = ['jpg', 'png', 'gif','webp'];
音影片檔案（這裡以.mp4舉例）
office檔案

const wordType = ['docx', 'doc']; // word
const excelType = ['xls', 'xlsx']; // excel
const pptType = ['ppt', 'pptx']; //ppt

我們監聽了樹的點選事件當點選某個檔案的時候能夠拿到這個檔案的相關資訊，包括File物件。

我們的dom結構大概是這樣的，根據我們當前點選的檔案型別展示不同的元素。

<div class='left'>
  <!-- 檔案樹結構 -->
  <a-tree></a-tree>
</div>
<div class='right'>
  <!-- 圖片 -->
  <div v-if="pictureType.some(item => item == currentFile?.fileType)">
    <img :src="currentFile?.url" class="img" title="點選檢視" v-viewer />
  </div>
  <!-- 文字 -->
  <div v-else-if="txtType.some((item) => item == currentFile?.fileType)" class="txt">
    <code>{{ textContent }}</code>
  </div>
  <!-- 影片 -->
  <div v-else-if="currentFile?.fileType == 'mp4'" style="width: 100%;">
    <video :src="currentFile.url"></video>
  </div>
  .....
</div>

那麼我們如何讀取檔案的內容呢？這裡我們需要用到一個api，FileReader - Web API | MDN

FileReader 介面允許 Web 應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。

呼叫這個建構函式會返回一個例項，透過這個例項我們就能將檔案讀取成任何我們想要的型別了。

1.文字類檔案

// 文字內容
const textContent: string = ref('')
const reader: any = new FileReader()

// 文字檔案，直接使用readAsText將檔案讀取為文字再展示即可
if (txtType.some((item) => item == fileType)) {
  reader.readAsText(file)
  reader.onload = () => textContent.value = reader.result
}

2. 圖片類檔案

將檔案讀取為base64的字串，直接藉助瀏覽器的img標籤展示即可展示。

const reader: any = new FileReader()
// 圖片
if (pictureType.some(item => item == fileType)) {
  reader.readAsDataURL(file)
  reader.onload = () => currentFile.value.url = reader.result
}

3. 音影片類檔案

音影片檔案的預覽直接使用對應的標籤即可，即和，但是都是透過src屬性指定需要播放的內容的，所以，我們可以讀取檔案後呼叫URL.createObjectURL將物件轉換為一個包含物件 URL 的字串，然後賦值即可。

const reader: any = new FileReader()
// 影片
if (fileType == 'mp4') {
  reader.readAsArrayBuffer(file)
  reader.onload = () => currentFile.value.url = URL.createObjectURL(new Blob([reader.result], { type: 'video/mp4' }))
}

4. office檔案

4.1 docx、xlsx、pdf

docx、xlsx、pdf檔案的預覽，我們需要藉助vue-office這個庫幫我們完成，這裡貼上需要安裝的依賴，使用方法很簡單可以參考官方給出的示例vue-office簡介 | vue-office

#docx文件預覽元件
npm install @vue-office/docx vue-demi

#excel文件預覽元件
npm install @vue-office/excel vue-demi

#pdf文件預覽元件
npm install @vue-office/pdf vue-demi

4.1.1 word預覽

<div v-else-if="wordType.some((item) => item == currentFile?.fileType)" class="word">
  <vue-office-docx :src="currentFile?.url" style=" height: 100vh;" />
</div>

//引入VueOfficeDocx元件
import VueOfficeDocx from '@vue-office/docx'
//引入相關樣式
import '@vue-office/docx/lib/index.css'

if (wordType.some((item) => item == fileType)) {
  reader.readAsArrayBuffer(file)
  reader.onload = () => currentFile.value.url = URL.createObjectURL(new Blob([reader.result]))  
}

4.1.2 excel預覽

<div v-else-if="excelType.some((item) => item == currentFile?.fileType)" class="excel">
  <VueOfficeExcel :src="currentFile?.url" style="width: 100vw; height: 100vh;" />
</div>

//引入VueOfficeExcel元件
import VueOfficeExcel from '@vue-office/excel'
//引入相關樣式
import '@vue-office/excel/lib/index.css'

if (excelType.some((item) => item == fileType)) {
  reader.readAsArrayBuffer(file)
  reader.onload = () => currentFile.value.url = URL.createObjectURL(new Blob([reader.result]))  
}

4.1.3 pdf預覽

<div v-else-if="currentFile?.fileType == 'pdf'" class="pdf">
  <vueOfficePdf :src="currentFile?.url" style="width: 100%; height: 100vh;" />
</div>

//引入VueOfficePdf元件
import VueOfficePdf from '@vue-office/pdf'

if (fileType === 'pdf') {
  reader.readAsArrayBuffer(file)
  reader.onload = () => currentFile.value.url = URL.createObjectURL(new Blob([reader.result]))  
}