javascript 有没有办法在 pdf.js 中合并 PDF？

Is there a way to combine PDFs in pdf.js?

提问by Daniel Ruf

Well I want to combine existing pdf files in html5 using pdf.js and generate a single pdf out of them

好吧，我想使用 pdf.js 在 html5 中组合现有的 pdf 文件并从中生成一个 pdf

Is this possible and how can I do this?

这是可能的，我该怎么做？

回答by Philzen

Combining multiple documents and merely displaying them as one with pdf.js is easily possible - i just hacked the following example based on the simple prev/next viewerexample that mozilla provides in their repository.

合并多个文档并仅将它们与 pdf.js 显示为一个是很容易的 - 我只是根据mozilla 在其存储库中提供的简单上一个/下一个查看器示例修改了以下示例。

   
 
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    //
    var urls = [
        'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
        'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
    ];

    // Disable workers to avoid yet another cross-origin issue (workers need
    // the URL of the script to be loaded, and dynamically loading a cross-origin
    // script does not work).
    //
    // pdfjsLib.disableWorker = true;

    // In cases when the pdf.worker.js is located at the different folder than the
    // pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
    // shall be specified.
    //
    // pdfjsLib.workerSrc = 'pdf.worker.js';

    /**
     * @typedef {Object} PageInfo
     * @property {number} documentIndex 
     * @property {number} pageNumber
     */

var pdfDocs = [],
    /**
     * @property {PageInfo}
     */
    current = {},
    totalPageCount = 0,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

/**
 * Get page info from document, resize canvas accordingly, and render page.
 * @param num Page number.
 */
function renderPage(num) {
    pageRendering = true;
    current = getPageInfo(num);
    // Using promise to fetch the page
    pdfDocs[current.documentIndex]      .getPage(current.pageNumber).then(function (page) {
        var viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
            }
        });
    });

    // Update page counters
    document.getElementById('page_num').textContent = pageNum;
}

/**
 * If another page rendering in progress, waits until the rendering is
 * finished. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
    if (pageRendering) {
        pageNumPending = num;
    } else {
        renderPage(num);
    }
}

/**
 * Displays previous page.
 */
function onPrevPage() {
    if (pageNum <= 1) {
        return;
    }
    pageNum--;
    queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * Displays next page.
 */
function onNextPage() {
    if (pageNum >= totalPageCount && current.documentIndex + 1 === pdfDocs.length) {
        return;
    }
    
    pageNum++;
    queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);

/**
 * @returns PageNumber
 */
function getPageInfo (num) {
    var totalPageCount = 0;
    for (var docIdx = 0; docIdx < pdfDocs.length; docIdx++) {
        
        totalPageCount += pdfDocs[docIdx].numPages;
        if (num <= totalPageCount) {
            return {documentIndex: docIdx, pageNumber: num};
        }
        num -= pdfDocs[docIdx].numPages;
    }
    
    return false;
};

function getTotalPageCount() {
    var totalPageCount = 0;
    for (var docIdx = 0; docIdx < pdfDocs.length; docIdx++) {
        totalPageCount += pdfDocs[docIdx].numPages;
    }
    return totalPageCount;
}

var loadedCount = 0;
function load() {
    // Load PDFs one after another
    pdfjsLib.getDocument(urls[loadedCount])
    .promise.then(function (pdfDoc_) {
        console.log('loaded PDF ' + loadedCount);
        pdfDocs.push(pdfDoc_);
        loadedCount++;
        if (loadedCount !== urls.length) {
            return load();
        } 
        
        console.log('Finished loading');
        totalPageCount = getTotalPageCount();
        document.getElementById('page_count').textContent = totalPageCount;

        // Initial/first page rendering
        renderPage(pageNum);
    });        
}

<!DOCTYPE html>
<html>
    <head>
        <base href="https://mozilla.github.io/pdf.js/" />
        <meta charset="UTF-8">
        <title>Previous/Next example</title>
    </head>
    <body onload="load()">

        <div>
            <button id="prev">Previous</button>
            <button id="next">Next</button>
            &nbsp; &nbsp;
            <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
        </div>

        <div>
            <canvas id="the-canvas" style="border:1px solid black"></canvas>
        </div>

        <script src="build/pdf.js"></script>

    </body>
</html>

For the sake of not having reliable test documents out there on servers sending a proper CORS-Header, this example simply merges two copies of the default document. If you execute this on your own server, you can of course add any document hosted under the same domain by adding them to the urlsarray.

为了在发送正确 CORS-Header 的服务器上没有可靠的测试文档，此示例只是合并了默认文档的两个副本。如果您在自己的服务器上执行此操作，您当然可以通过将它们添加到urls数组来添加托管在同一域下的任何文档。

回答by mark stephens

You would be better off merging the pages together on the server first.

您最好先将服务器上的页面合并在一起。