深度剖析pdfjs-dist

PDF.js是一種基於JavaScript的PDF渲染框架，它可以在現代瀏覽器中為每個頁面提供高質量的PDF文件閱讀體驗。pdfjs-dist是由PDF.js代碼庫構建的NPM Package，將PDF.js的核心渲染器封裝為一個可嵌入的，用於Node.js和瀏覽器的腳本文件。

一、基本用法

使用pdfjs-dist可以很方便地將PDF文件嵌入到Web應用中。以下是代碼示例：

  
    const pdfjsLib = require('pdfjs-dist');
    
    pdfjsLib.getDocument('example.pdf').promise.then((pdf) => {
        pdf.getPage(1).then((page) => {
            const scale = 1.5;
            const viewport = page.getViewport({ scale: scale });

            const canvas = document.getElementById('pdf-canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
  

上述代碼通過調用pdfjsLib對象中的getDocument方法獲取PDF文檔，然後在獲取的文檔中，使用getPage方法獲取指定頁面。獲取到頁面後，我們可以通過指定縮放比例並調用getViewport方法獲取頁面視口。獲取視口後，我們可以通過新建一個canvas元素來顯示頁面，最後，使用page.render方法渲染頁面內容到canvas上。

二、高級用法

1. 導出PDF為圖片

在某些場景中，我們需要將PDF文檔導出為圖片，以便於在其他平台或介質中展示。使用pdfjs-dist，我們可以輕鬆完成此操作。以下是代碼示例：

  
    const pdfjsLib = require('pdfjs-dist');
    const fs = require('fs');
    const path = require('path');

    pdfjsLib.getDocument('example.pdf').promise.then((pdf) => {
        const pageCount = pdf.numPages;
        const promises = [];
        for(let i = 1; i  {
                const scale = 1.5;
                const viewport = page.getViewport({ scale: scale });
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                return page.render(renderContext).promise.then(() => {
                    const imageData = canvas.toDataURL('image/png');
                    return imageData;
                });
            });
            promises.push(promise);
        }
        Promise.all(promises).then((data) => {
            data.forEach((imageData, index) => {
                fs.writeFileSync(path.join(__dirname, `page-${index+1}.png`), imageData);
            });
        });
    });
  

上述代碼通過在PDF文檔中迭代獲取每個頁面並將其渲染為canvas元素，並將canvas元素轉換為base64編碼的圖像數據，使用fs模塊將圖像數據寫入文件系統中。通過此方法，我們可以將PDF文檔中的每個頁面導出為獨立的PNG圖像文件。

2. 搜索PDF

使用pdfjs-dist，我們還可以實現在PDF文檔中進行內容搜索的功能。以下是代碼示例：

  
    const pdfjsLib = require('pdfjs-dist');

    pdfjsLib.getDocument('example.pdf').promise.then((pdf) => {
        const pageCount = pdf.numPages;
        const promises = [];
        for(let i = 1; i  {
                return page.getTextContent().then((textContent) => {
                    const textItems = textContent.items;
                    const searchText = 'example';
                    const matches = [];

                    for (let j = 0; j  {
            const allMatches = [].concat(...data);
            console.log(allMatches);
        });
    });
  

上述代碼通過在PDF文檔中迭代獲取每個頁面並獲取其中的文本內容，使用正則表達式搜索文本內容，並將搜索結果構建為一個數組返回。

3. 合併多個PDF文檔

使用pdfjs-dist，我們還可以很容易地實現將多個PDF文檔合併為一個大的PDF文檔的功能。以下是代碼示例：

  
    const pdfjsLib = require('pdfjs-dist');
    const fs = require('fs');
    const path = require('path');

    const docUrlList = [
        'example1.pdf',
        'example2.pdf',
        'example3.pdf'
    ];

    const mergePdfs = (docUrlList) => {
        const promises = [];
        docUrlList.forEach((url) => {
            const promise = pdfjsLib.getDocument(url).promise;
            promises.push(promise);
        });
        Promise.all(promises).then((docs) => {
            const mergedPdf = docs[0];
            const pageCount = mergedPdf.numPages;
            for(let i = 1; i < docs.length; i++) {
                const doc = docs[i];
                for(let j = 1; j  {
                        doc.getPage(j).then((srcPage) => {
                            const viewport = srcPage.getViewport({ scale: 1 });
                            page.setWidth(viewport.width);
                            page.setHeight(viewport.height);

                            const context = page.getContext('2d');
                            const renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            srcPage.render(renderContext).then(() => {
                                if(i === docs.length - 1 && j === doc.numPages) {
                                    mergedPdf.save().then(() => {
                                        console.log('Merge complete!');
                                    });
                                }
                            });
                        });
                    });
                }
            }
        });
    };

    mergePdfs(docUrlList);
  

上述代碼首先將所有PDF文檔獲取並存儲在docs數組中，在獲取第一個文檔作為基礎文檔。然後，迭代所有文檔並將每個頁面插入到基礎文檔中，最終將合併後的文檔保存為一個新的PDF文檔。

三、總結

pdfjs-dist是一種非常實用的PDF渲染器封裝，在實現PDF渲染和相關操作時，我們可以節省大量時間和精力。希望這篇文章可以對您了解並使用pdfjs-dist有所幫助。