2014-01-14 52 views
-3

我想開發一個功能來在瀏覽器中以書籍格式讀取上傳的pdf文件。 任何人都可以建議我怎麼做到這一點? 我想實現它使用php,jQuery的JavaScript。pdf使用fpdf庫的php書籍閱讀器

+1

你還讀過FPDF的功能嗎? –

+0

是的,在這裏我正在尋找解決方案來實現這一目標。如果存在任何其他庫或工具 –

回答

1

您可以使用JS對以下鏈接 https://github.com/mozilla/pdf.js

用法舉例

<!doctype html> 
<html> 

<head> 
    <!-- In production, only one script (pdf.js) is necessary --> 
    <!-- In production, change the content of PDFJS.workerSrc below --> 
    <script type="text/javascript" src="../../src/shared/util.js"></script> 
    <script type="text/javascript" src="../../src/shared/colorspace.js"></script> 
    <script type="text/javascript" src="../../src/shared/pattern.js"></script> 
    <script type="text/javascript" src="../../src/shared/function.js"></script> 
    <script type="text/javascript" src="../../src/shared/annotation.js"></script> 
    <script type="text/javascript" src="../../src/display/api.js"></script> 
    <script type="text/javascript" src="../../src/display/metadata.js"></script> 
    <script type="text/javascript" src="../../src/display/canvas.js"></script> 
    <script type="text/javascript" src="../../src/display/font_loader.js"></script> 

    <script type="text/javascript"> 
    // Specify the main script used to create a new PDF.JS web worker. 
    // In production, leave this undefined or change it to point to the 
    // combined `pdf.worker.js` file. 
    PDFJS.workerSrc = '../../src/worker_loader.js'; 
    </script> 
    <script type="text/javascript" src="hello.js"></script> 
</head> 

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

</html> 

hello.js - 文件

// 
// Fetch the PDF document from the URL using promises 
// 
PDFJS.getDocument('helloworld.pdf').then(function(pdf) { 
    // Using promise to fetch the page 
    pdf.getPage(1).then(function(page) { 
    var scale = 1.5; 
    var viewport = page.getViewport(scale); 

    // 
    // Prepare canvas using PDF page dimensions 
    // 
    var canvas = document.getElementById('the-canvas'); 
    var context = canvas.getContext('2d'); 
    canvas.height = viewport.height; 
    canvas.width = viewport.width; 

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

這將幫助你提供的附件直接查看

1

我試試使用https://github.com/mozilla/pdf.js開發PDF書籍,但沒有運氣。

我不確定我會在「viewer.js」文件中更改哪些參數,以便製作PDF書籍。我正在避免https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website-%28Windows%29文件。我可以在瀏覽器中打開PDF,但不能以書籍格式打開PDF。

+0

在view.js中,您將更改打開PDF的文件路徑,可能是使用調用此代碼的方法,並且函數參數有助於根據需要切換文件名,其餘的代碼應該保持不變,我看到它的工作。可能再給一次機會,你可以成功 – rsakhale