PDF file preview on website developed with PHP, Jquery and CSS3

Question

PDF file preview on website developed with PHP, Jquery and CSS3

Navigation

#1 by (3 votes)

1

I saw on the Dropbox website that my PDF extension files are previewed on the first page of the file, I looked for solutions on the internet for the same but I saw that there are only ways to embed the PDF in iframe or using a google drive URL to I would like to do the same on my website, but I do not make use of these suggestions that it displays everything, because there are many PDF's and it will be heavy loading of the screen, I would like to know how they do to get this print from the first page of the PDF, as it is done in Dropbox. The files are with the path saved in the database, the physical files on an upload page, the website I use PHP, jQuery and CSS3.

Thank you.

php jquery pdf

asked by anonymous 13.05.2018 / 05:40

1 answer

How to remove vowels from a JS String? Data Structure, Circular Row. Doubts about the Debug and Queuing methods

score 3 · Accepted Answer

Use PDF.js

First download PDF.js and get all scripts and add to your project, then on your page, <head> should add:

<script src="build/pdf.js"></script>

To get the first page (or any other) use getPage

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.getDocument('helloworld.pdf').then(function (pdf) {
    pdf.getPage(1).then(function(page) {
        var scale = 1.5; //Scala inicial desejada, ajuste como quiser

        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('meuCanvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render({
          canvasContext: context,
          viewport: viewport
        });
    });
});

And there should be a canvas on the page (or generate), with the contents of it:

<canvas id="meuCanvas"></canvas>