Initialize PDF.js in website

Question

I am trying to integrate PDF.js in my website, but am unable to get it done correctly.

This is what the screen shows:

I can not see the PDF file on the screen, but when I press Print, the print menu does show the PDF file in it. Other functionality is working fine.

This is my code:

[[HTML HERE downloaded from source of PDF.JS]]

<!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="<?php echo JS_LIB_FOLDER; ?>pdfjs/web/locale/locale.properties"/>

<?php
echo $this->Html->css(JS_LIB_FOLDER . 'pdfjs/web/viewer.css');

echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/compatibility.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/l10n.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/build/pdf.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/debugger.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/viewer.js');
?>

<script type="text/javascript">
    'use strict';
    PDFJS.imageResourcesPath = site_url+'js/library/pdfjs/web/images/';
    PDFJS.workerSrc = site_url+'js/library/pdfjs/build/pdf.worker.js';
    PDFJS.cMapUrl = site_url+'js/library/pdfjs/web/cmaps/';

</script>

I have googled this issue extensively, but found nothing on how to successfully integrate this library. Any penny help will be appreciated.

P.S. There is no error in javascript console.

"But unable to get it done correctly." is not a description of a problem. What **specific** issues are you running into? We're not going to go through hundreds of lines of mostly irrelevant code to try and decipher what your issue is. — ceejayoz, Jan 08 '16 at 13:42
please reduce the supplied code to a minimum sample reproducing the error — Remigius Stalder, Jan 08 '16 at 13:43
@Parixit You still haven't described what *does* happen. What have you done to troubleshoot? Have you tried a minimal page with PDF.js to make sure that works? — ceejayoz, Jan 08 '16 at 13:50

score 3 · Accepted Answer · answered Jan 11 '16 at 20:44

If in your layout (e.g. /app/View/Layouts/default.ctp), your content block is wrapped in divs:

<div id="container">
    <div id="content">
        <?php echo $this->fetch('content'); ?>
    </div>
</div>

The PDFJS canvas will be hidden, and you won't be able to visualize the PDF.

If you check the computed layout for <div id="outerContainer">in Firebug, this is what you get:

That is 1212 pixels wide, but 0 pixels tall.

You can either remove the divs wrapping your content block in your layout, or you can assign a height to the divs. E.g.:

<div id="outerContainer" style="height:400px">

Initialize PDF.js in website

1 Answers1