前端下載PDF的完整實現

一、使用PDF.js預覽和下載PDF文件

Pdf.js是一個由Mozilla開發的JavaScript庫，可以在Web上直接預覽PDF文件。它提供了比瀏覽器默認的預覽PDF更多的功能，如縮放、旋轉、打印等。

在這裡，我們可以使用Pdf.js輕鬆實現PDF預覽和下載：

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>


<div id="pdf-container"></div>

<script>
  // 遠程 PDF 文件 URL
  const pdfUrl = 'https://example.com/file.pdf';

  // 獲取 DOM 元素
  const container = document.querySelector('#pdf-container');

  // 加載 PDF 文件
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    // 獲取第 1 頁
    return pdf.getPage(1);
  }).then(page => {
    // 設置縮放比例
    const scale = 1.5;

    // 獲取 canvas 渲染上下文
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = page.view[2] * scale;
    canvas.height = page.view[3] * scale;
    container.appendChild(canvas);

    // 渲染頁面
    page.render({
      canvasContext: context,
      viewport: page.getViewport({ scale }),
    });

    // 創建下載按鈕
    const downloadBtn = document.createElement('a');
    downloadBtn.href = pdfUrl;
    downloadBtn.download = 'file.pdf';
    downloadBtn.textContent = 'Download';

    // 將下載按鈕添加到 DOM 中
    container.appendChild(downloadBtn);
  });
</script>

二、使用jsPDF生成PDF文件並下載

jsPDF是一個純JavaScript庫，它可以在客戶端創建PDF文件。它不需要服務器處理，只需要在客戶端生成即可。

我們可以通過以下代碼使用jsPDF生成並下載PDF文件：

// 引入 jsPDF 庫
import jsPDF from 'jspdf';

// 創建 PDF 對象
const doc = new jsPDF();

// 添加內容
doc.text('Hello, jsPDF!', 10, 10);

// 下載文件
doc.save('file.pdf');

除了文本之外，jsPDF還支持更多的內容類型，如圖像、表格等，使PDF生成更加豐富。

三、使用pdfmake生成高質量PDF文件

pdfmake是一個比jsPDF功能更強大的JavaScript庫，可以用於生成高質量的PDF文件。它支持更多的樣式和內容類型，如Markdown、HTML、表格、圖像等。此外，它還提供了更多的排版和布局選項。

我們可以使用pdfmake在線預覽和生成PDF文件，或者將其集成到我們的應用程序中，生成和下載PDF文件。

以下是一個使用pdfmake創建PDF文件的示例：

// 引入 pdfmake 庫
import pdfMake from 'pdfmake';

// 創建 doc 定義對象
const docDefinition = {
  content: [
    { text: 'This is a heading', style: 'header' },
    'This is a paragraph',
    {
      ul: [
        'Item 1',
        'Item 2',
        'Item 3',
      ]
    }
  ],
  styles: {
    header: {
      fontSize: 22,
      bold: true,
      margin: [0, 0, 0, 10],
    },
  },
};

// 創建 PDF 文檔
const doc = pdfMake.createPdf(docDefinition);

// 下載 PDF 文件
doc.download('file.pdf');

四、結語

在前端應用中，PDF文件廣泛應用於打印、掃描、閱讀、表單提交等場景。本篇文章介紹了3種前端下載PDF的方法，通過使用不同的庫和工具都可以生成和下載PDF文件。

通過學習和應用這些庫和工具，我們可以在前端應用中更好地使用和處理PDF文件，滿足各種業務需求和用戶需求。