檔案上傳系統設計 (13) —— 文件預覽解決方案

恭喜你！我們已經走過了從底層 HTTP 協議到全球加速 CDN 的漫長旅程。現在，我們的系統已經具備了強大的上傳、整合、處理與保護能力。

但在實際應用中，使用者上傳檔案後，最常做的一件事就是「看一眼」。對於圖片，這很簡單；但如果上傳的是 PDF、Word 合約或是 Excel 報表呢？

這是本系列的完結篇，我們來聊聊如何優雅地解決 文件預覽 (File Preview)。

一、 PDF 預覽：最親民的文件格式

PDF 是目前瀏覽器支持最完善的非圖片格式。

最簡單的做法是利用瀏覽器內建的 PDF 閱讀器。

html

<iframe src="/path/to/my.pdf" width="100%" height="500px"></iframe>

如果你希望擁有完全掌控的 UI（例如禁止列印、浮水印或是分頁加載），Mozilla 開發的 PDF.js 是業界標準。它將 PDF 解析為 Canvas 繪製，不受瀏覽器外掛限制。

瀏覽器原生是看不懂 .docx 或 .xlsx 的。你通常有三種選擇：

公用檢視器 (Public Viewers)：利用微軟或 Google 提供的線上預覽服務。你只需要提供一個公開的檔案連結。
- https://view.officeapps.live.com/op/view.aspx?src=[YOUR_URL]
- 缺點：檔案必須是公網可存取的，不適合私密文件。
後端轉 PDF：在伺服器端利用 LibreOffice 或專門的轉檔服務（如 Go-Libreoffice），將 Office 文件先轉成 PDF，再套用 PDF 預覽邏輯。

預覽檔案時，最怕檔案中夾帶惡意腳本（XSS 攻擊）。

Sandbox 屬性：在使用 iframe 預覽時，務必加上 sandbox。
html
```
<iframe src="..." sandbox="allow-forms allow-scripts"></iframe>
```
Content-Type：確保後端回傳正確的 MIME 標籤，防止瀏覽器誤將內容當成 HTML 執行。

在這 13 篇文章中，我們建立了一個完整的森林，而不僅僅是看到幾棵樹：

後端工程師的價值，不在於你會寫多少個 POST 介面，而在於你對於數據傳輸細節的掌控、對安全邊界的守護，以及對系統可擴展性的前瞻性思考。

嘗試實作一個通用的檔案預覽組件，它可以根據檔案的 mime_type 自動切換圖片、PDF 或音影音播放器。