2012-03-21 7 views
5

Vâng, tôi muốn kết hợp file pdf hiện trong html5 sử dụng pdf.js và tạo ra một pdf đơn ra trong số họCó cách nào để kết hợp các tệp PDF trong pdf.js không?

Đây có phải là có thể và làm thế nào tôi có thể làm điều này?

+2

Như tôi đã biết, pdf.js là thư viện hiển thị PDF sử dụng HTML5 chứ không phải trình tạo PDF. Bạn đang xem xét hiển thị nhiều tệp PDF trong cùng một canvas HTML5? –

+0

có thats những gì tôi cần –

Trả lời

3

Kết hợp nhiều tài liệu và chỉ hiển thị chúng dưới dạng pdf.js dễ dàng có thể - tôi vừa hack ví dụ sau dựa trên ví dụ đơn giản prev/next viewer mà mozilla cung cấp trong kho lưu trữ của chúng.

// 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>

Vì lợi ích của việc không có giấy tờ kiểm tra đáng tin cậy trên mạng trên các máy chủ gửi một hợp CORS-Header, ví dụ này chỉ đơn giản là kết hợp hai bản sao của tài liệu mặc định. Nếu bạn thực hiện điều này trên máy chủ của riêng bạn, bạn có thể thêm tất cả tài liệu được lưu trữ trong cùng một tên miền bằng cách thêm chúng vào mảng urls.

+0

tuyệt vời, tốt đẹp để xem một giải pháp thực tế –

+0

Niềm vui của tôi: D Cần thiết này cho một dự án như là một bằng chứng-of-khái niệm anyway, vì vậy bạn đang chào đón. [Tài liệu api] của thư viện (http://mozilla.github.io/pdf.js/api/draft/index.html) rất không tồn tại - nhưng nhìn chằm chằm vào mã của chúng đủ lâu, đôi khi đưa tôi đến đâu đó cuối cùng. – Philzen

1

Bạn nên kết hợp các trang lại với nhau trên máy chủ trước tiên.

+0

bạn có đề nghị tcpdf cho việc này không? –

+0

Hoặc Itext nếu bạn đang làm việc trong Java. –

+0

java không phải là javascript. tại sao tôi muốn sử dụng java? Tôi đã làm nó bây giờ với fpdf và fpdi –