在 web 開發中，文件預覽是一項非常重要的功能。如果我們能夠在網頁中預覽一些文件，比如圖片、PDF、Word 文檔等等，對于用戶體驗和操作流程都會產生很大的幫助。在這里，我們將重點討論使用 javascript 實現文件預覽的方法。
首先，我們需要知道，javascript 是一個非常強大的腳本語言，它可以通過瀏覽器 API 很容易地訪問和操作本地文件系統。因此，我們可以利用 javascript 中的 FileReader 對象讀取文件內容，然后通過 DOM 操作來實現文件預覽。
下面是一個簡單的示例，在這個示例中，我們使用了一個 input[type=file] 輸入框，用戶可以選擇一個本地文件進行預覽。
<!DOCTYPE html>
<html>
<head>
<title>文件預覽示例</title>
</head>
<body>
<input type="file" onchange="previewFile()">
<img src="" id="preview">
<script>
function previewFile() {
const preview = document.querySelector('#preview');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>在上面的代碼中，我們首先獲取了 input[type=file] 元素和預覽元素。當用戶選擇了一個文件之后，我們通過 FileReader 對象來讀取文件內容，并將讀取到的內容轉換成數據 URL。最后，我們將數據 URL 賦值給 img 元素的 src 屬性，就可以在頁面上預覽文件了。
當然，文件預覽不僅僅局限于圖片，我們還可以預覽 PDF、Word 文檔等不同格式的文件。以 PDF 文件預覽為例，我們可以使用一個第三方庫 pdf.js，這個庫可以將 PDF 文件渲染成 canvas 或者 svg，然后在頁面上進行展示。下面是一個簡單的 PDF 預覽示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>PDF 預覽示例</title>
<script src="https://mozilla.github.io/pdf.js/build/pdf.min.js"></script>
</head>
<body>
<div id="preview"></div>
<script>
const pdfUrl = 'https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf';
const container = document.getElementById("preview");
pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
const canvas = document.createElement("canvas");
container.appendChild(canvas);
const viewport = page.getViewport({scale: 1});
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: canvas.getContext("2d"),
viewport: viewport
});
});
});
</script>
</body>
</html>在上面的代碼中，我們首先引入了 pdf.js 庫，然后創建了一個空的 div 元素作為容器。接著，我們使用 pdfjsLib 對象的 getDocument 方法來獲取 PDF 文件內容，并使用 getPage 方法來獲取第一頁。然后，我們創建一個 canvas 元素，根據頁面的尺寸設置 canvas 的寬高，并通過 page.render 方法將 PDF 頁面渲染到 canvas 上。最終，我們將 canvas 元素添加到容器中，就可以在頁面上預覽 PDF 文件了。
綜上所述，javascript 可以通過瀏覽器 API 訪問和操作本地文件系統，并通過 DOM 操作實現文件預覽。利用這一點，我們可以實現各種格式的文件預覽，提升用戶體驗和操作流程。