2012-03-21 9 views
5

वैसे मैं पीडीएफ.जेएस का उपयोग कर एचटीएमएल 5 में मौजूदा पीडीएफ फाइलों को जोड़ना चाहता हूं और उनमें से एक पीडीएफ उत्पन्न करना चाहता हूंपीडीएफ.जेएस में पीडीएफ को गठबंधन करने का कोई तरीका है?

क्या यह संभव है और मैं यह कैसे कर सकता हूं?

+2

जैसा कि मैं समझता हूं, पीडीएफ.जेएस एक पीडीएफ प्रतिपादन लाइब्रेरी है जो पीडीएफ जेनरेटर नहीं, एचटीएमएल 5 का उपयोग करता है। क्या आप एक ही एचटीएमएल 5 कैनवास में एकाधिक पीडीएफ प्रस्तुत करना चाहते हैं? –

+0

हां, मुझे क्या चाहिए –

उत्तर

3

एकाधिक दस्तावेज़ों को जोड़ना और उन्हें पीडीएफ.जेएस के साथ केवल एक के रूप में प्रदर्शित करना संभव है - मैंने सरल prev/next viewer उदाहरण के आधार पर निम्नलिखित उदाहरण हैक किया है कि मोज़िला अपने भंडार में प्रदान करता है।

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

विश्वसनीय परीक्षण दस्तावेजों एक उचित CORS-हैडर भेजने सर्वर पर वहाँ नहीं होने के लिए, इस उदाहरण बस डिफ़ॉल्ट दस्तावेज़ की दो प्रतियां विलीन हो जाती है। यदि आप इसे अपने सर्वर पर निष्पादित करते हैं, तो आप निश्चित रूप से urls सरणी में जोड़कर उसी डोमेन के अंतर्गत होस्ट किए गए किसी भी दस्तावेज़ को जोड़ सकते हैं।

+0

के साथ किया है, एक वास्तविक समाधान देखने के लिए अच्छा –

+0

मेरी खुशी: डी को प्रोजेक्ट के सबूत के रूप में किसी प्रोजेक्ट के लिए इसकी आवश्यकता है, इसलिए आपका स्वागत है। लाइब्रेरी का [एपीआई दस्तावेज] (http://mozilla.github.io/pdf.js/api/draft/index.html) घृणित रूप से अस्तित्वहीन नहीं है - लेकिन लंबे समय तक उनके कोड पर घूरने से कभी-कभी मुझे अंततः कहीं मिलता है। – Philzen

1

आप पहले सर्वर पर पृष्ठों को विलय करने से बेहतर होंगे।

+0

क्या आप इसके लिए टीसीपीडीएफ की सिफारिश करेंगे? यदि आप जावा में काम कर रहे हैं तो –

+0

या Itext। –

+0

जावा जावास्क्रिप्ट नहीं है। मैं जावा का उपयोग क्यों करूंगा? मैंने इसे अब एफपीडीएफ और एफपीडीआई –

संबंधित मुद्दे