pdf.jsでPDFを結合する方法はありますか？

Question

私はpdf.jsを使用してhtml5に既存のpdfファイルを結合し、その中から1つのpdfを生成したい

これは可能ですか？

Answer 1

複数のドキュメントを組み合わせてpdf.jsで表示するだけで簡単に可能です。単純なprev/next viewerの例に基づいて、mozillaがリポジトリに提供する次の例をハッキングしました。適切なCORS-ヘッダーを送信するサーバー上でそこに信頼性の高いテストドキュメントを持っていないの便宜上

// 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). 
 
    // 
 
    // PDFJS.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. 
 
    // 
 
    // PDFJS.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); 
 
     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 
 
* finised. 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 
 
    PDFJS.getDocument(urls[loadedCount]).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> 
 

 
     <!-- for legacy browsers add compatibility.js --> 
 
     <script src="web/compatibility.js"></script> 
 

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

 
    </body> 
 
</html>

、この例では、単純に既定のドキュメントの2つのコピーをマージします。独自のサーバーでこれを実行する場合は、同じドメインにホストされているドキュメントをurlsアレイに追加することで、ドキュメントを追加できます。

Answer 2

まず、サーバー上でページをまとめてマージする方がよいでしょう。