Show PDF file on webpage as Carousel with each page as a separate slide

Question

I am facing a challenging assignment - create a slider carousel winch will be displaying separate pages of a single multi-page PDF as a separate slides on webpage. Check out the image below to get the exact idea of how it supposed to look when its done:

It has to look like a regular document and shouldn't have any scrollbars, toolbars, zoom buttons and so on. Also, the site will be hosted on local host with no internet, so using external apis such as Google PDF Viewer will not be an option.

As of right now, I see 2 different approaches: embed PDF in each slide or server side conversion of PDF to PNG to display later in slides. I am currently facing some obstacles in both of these approaches:

1) First Approach - Embed PDF

What if I will embed pdf in each slide specifying the page parameter?

I've tried:

a) Plain embed

b) Object

I've used next parameters #page=5&toolbar=0&navpanes=0&scrollbar=0&view=fitwith pdf.

The results are pretty much the same:

• Chrome doesnt scale the pdf and displays scrollbars as well as some pdf viewer background as well as some zoom buttons on mouseover
• Firefox shows toolbars
• Ie and Safari both pretty close to what I need, yet showing some dark background of pdf viewer

Is it possible there is no cross-browser way to embed raw PDF to make it look seamless like part of the page?

2) Second Approach : Covert PDF to another format (haven't tried these yet)

What if I will convert PDF on server side?

a) Convert to PNG with ImageMagick. Downside - client will have to install ImageMagic and probably Ghostview on a server which I would prefer to avoid if possible.

b) Convert to SWF with PHP SwfTools. Not sure if this will be implemented as expected and plus flash support is on decline, probably not the best of approaches.

So which way should I proceed? I personalty would prefer to keep it as simple as possible... Did anyone encountered similar issue and can give me an advice?

Please help!

Answer 1

You can render your pdf file using pdf.js

<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
function renderPDF(url, canvasContainer, options) {
    var options = options || { scale: 1 };

    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };

        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvasContainer.appendChild(canvas);

        page.render(renderContext);
    }

    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }
    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);
}   
</script> 

<div id="holder"></div>

<script type="text/javascript">
renderPDF('sample.pdf', document.getElementById('holder'));
</script>