在Web開發中，經常需要處理PDF文件，尤其是在業務涉及發票、報告或文檔生成的場景下。本文將詳細介紹如何使用前端技術實現PDF文件的打印和下載，我們將利用HTML5的<embed>元素和JavaScript庫FileSaver.js來完成這一任務。
一、環境準備
確保你的項目中包含了以下技術棧：
- HTML5
- CSS3
- JavaScript
- FileSaver.js（用于文件下載）
二、引入FileSaver.js
首先，你需要在項目中引入FileSaver.js庫。你可以通過CDN鏈接直接引入，或者使用npm進行安裝。
通過CDN引入
Html
深色版本
1<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>通過npm安裝
Bash
深色版本
1npm install file-saver然后在你的JavaScript文件中引入：
Javascript
深色版本
1import { saveAs } from 'file-saver';三、顯示PDF文件
使用HTML5的<embed>或<object>標簽可以嵌入PDF文件。我們選擇使用<embed>，因為它提供了更好的跨瀏覽器兼容性。
Html
深色版本
1<embed id="pdfViewer" type="application/pdf" src="path/to/your/file.pdf" width="100%" height="600px">四、實現PDF打印
要實現PDF文件的打印，可以使用JavaScript的window.print()方法。但是，由于<embed>標簽本身沒有直接的打印功能，我們需要先確保PDF文件完全加載后再觸發打印動作。
Javascript
深色版本
1document.getElementById('pdfViewer').addEventListener('load', function() {
2 window.print();
3});然而，上面的方法在某些瀏覽器中可能不起作用，因為window.print()在某些情況下會阻止PDF文件的渲染。為此，我們可以采用一種更可靠的方法，使用iframe來加載PDF文件，然后再打印：
Html
深色版本
1<iframe id="printFrame" style="display:none;"></iframe>Javascript
深色版本
1function printPDF() {
2 var iframe = document.getElementById('printFrame');
3 iframe.src = 'path/to/your/file.pdf';
4
5 iframe.onload = function() {
6 setTimeout(function() {
7 window.frames['printFrame'].focus();
8 window.frames['printFrame'].print();
9 iframe.src = ''; // 清空iframe，防止重復打印
10 }, 100);
11 };
12}五、實現PDF下載
使用FileSaver.js庫，我們可以輕松地將PDF文件下載到用戶的設備上。以下是一個下載PDF文件的示例函數：
Javascript
深色版本
1function downloadPDF(url, filename) {
2 fetch(url)
3 .then(response => response.blob())
4 .then(blob => {
5 saveAs(blob, filename);
6 })
7 .catch(error => console.error('Error downloading PDF:', error));
8}在你的HTML頁面中添加一個按鈕，調用這個函數：
Html
深色版本
1<button onclick="downloadPDF('path/to/your/file.pdf', 'filename.pdf')">Download PDF</button>六、完整示例
將上述代碼片段整合在一起，你將得到一個可以打印和下載PDF文件的前端頁面。
Html
深色版本
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>PDF Viewer</title>
6<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
7</head>
8<body>
9<embed id="pdfViewer" type="application/pdf" src="path/to/your/file.pdf" width="100%" height="600px">
10
11<iframe id="printFrame" style="display:none;"></iframe>
12
13<button onclick="printPDF()">Print PDF</button>
14<button onclick="downloadPDF('path/to/your/file.pdf', 'filename.pdf')">Download PDF</button>
15
16<script>
17function printPDF() {
18 var iframe = document.getElementById('printFrame');
19 iframe.src = 'path/to/your/file.pdf';
20
21 iframe.onload = function() {
22 setTimeout(function() {
23 window.frames['printFrame'].focus();
24 window.frames['printFrame'].print();
25 iframe.src = '';
26 }, 100);
27 };
28}
29
30function downloadPDF(url, filename) {
31 fetch(url)
32 .then(response => response.blob())
33 .then(blob => {
34 saveAs(blob, filename);
35 })
36 .catch(error => console.error('Error downloading PDF:', error));
37}
38</script>
39</body>
40</html>七、總結
通過本文的介紹，你已經學會了如何在前端實現PDF文件的打印和下載功能。這不僅可以增強你的Web應用的功能性，還可以提高用戶體驗。記得在實際應用中，根據你的具體需求調整代碼，并確保遵守相關的版權和隱私法規。
