CODEWITHSUNDEEP
javascriptphphtmlpdfembed
Acidon
Acidon

Reputation: 1334

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

I am facing a challenging assignment - create a slider carousel which 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:

enter image description here

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:

enter image description here

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 : Convert 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!

Upvotes: 10

Views: 29716

Answers (2)

Mo'men Mohamed
Mo'men Mohamed

Reputation: 1909

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>

Upvotes: 7

omnichad
omnichad

Reputation: 1655

You actually have a 3rd option - PDF.js -https://mozilla.github.io/pdf.js/

The easiest is going to be server side conversion to PNG. There would be no complexity with embedding in a carousel and compatibility would be highest. The most versatile would probably be PDF.js. Using Flash will leave out mobile browsers, if that's a concern.

Upvotes: 1

Related Questions