Django - JS : How to display the first PDF page as cover

Question

I would like to improve my script in order to set PDF cover page for each object when user sets the mouve over the object on the template.

Actual process:

Up to now, I can upload .pdf and .epub file formats according to an object with some additionnals fields : title, language ...

The PDF is stored into media directory in my project.

In the main page, I display all objects like this :

As you can see in the end of each publication, there is a glyphicon which let, up to now, to display inside another tab the object PDF file.

Expected idea:

I would like to know if there is a way to display a window with the PDF file. The better thing will be to display only the first PDF page in order to define a cover page for each object.

In my HTML file, I have this line which let to display my PDF into another tab :

<td class="col-md-1"><a id="download-image_{{ document.id }}" href="http://localhost:8000/media/{{ document.upload }}"><span class="glyphicon glyphicon-blackboard"></span></a></td>

I assume I need to handle this line and add javascript from pdf.js in order to get only the first page and display it as a picture.

I read the PDF.js documentation and I would like to get some help in order to display my first PDF page. Documentation and examples from PDF.js are miscellaneous but I don't find how I can do that.

Edit :

Thanks to Kedas mendi, this is what I have according to his answer. But I don't overcome to display my pdf.

In my html file I have a table with :

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="../static/freepub/js/customPdf.js"></script>

<table>
    <td class="col-md-1">
        <canvas class="the-canvas"><a href="http://localhost:8000/media/{{ document.upload }}"><span class="glyphicon glyphicon-blackboard"></span></a></canvas>
    </td>
</table>

And my customPdf.js file :

pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum.pdf').then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

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

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

Up to now, getDocument() is pointing to a specific pdf file, but it will be a django variable at the end.

Anyway, I don"t display any PDF file

you use pdf.js for this, no backend required. You can do everything using js — Vaibhav Vishal, Sep 24 '18 at 13:56
https://mozilla.github.io/pdf.js/, their website, for examples and stuff — Vaibhav Vishal, Sep 24 '18 at 15:14
Not easy when you have none javascript knowledges, but thank you ;) However, if someone could help me with my existing code ^^ — Essex, Sep 24 '18 at 15:25

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Okay so, what you can do as mentioned in the comments go to :

Pdf.js Then,

Create a template html for the page you want to display
Add the following lines in your html code:

 <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="customPdf.js">

Create a canvas that will render your pdf file:

<canvas id="the-canvas"></canvas>

Create a new file named 'customPdf.js' and add what's next
Use this to load the pdf object

pdfjsLib.getDocument('/media/{{ document.upload }}').then(function(pdf) {
  // you can now use *pdf* here
});

You can also play with the settings to display it with the style you want:

var scale = 1.5;
var viewport = page.getViewport(scale);

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

var renderContext = {
  canvasContext: context,
  viewport: viewport
};

Finally you can render the page

page.render(renderContext);

Basically this is what you wanna do to render the first page, but please refer to the documentation for mor details.

I will edit my question with your answer and show you what I have. But up to now, I don't overcome to display my PDF. — Essex, Sep 25 '18 at 09:12
Can you add logs of chrome console if you have anything and django logs, also do the window open and nothing happen when you click on your glyphicon ? — Unicone, Sep 25 '18 at 09:19
I don't overcome to display glyphicon but I don't now if my syntax is good : `` . For Chrome logs, I get this : `TypeError: canvas.getContext is not a function` — Essex, Sep 25 '18 at 09:49

score 1 · Answer 2 · answered Sep 25 '18 at 10:10

Alright so i had to add another answer for this.

My project worktree:

└───stack
│   db.sqlite3
│   manage.py
│
├───.dist
├───main
│   │   admin.py
│   │   apps.py
│   │   models.py
│   │   pdf.pdf
│   │   tests.py
│   │   urls.py
│   │   views.py
│   │   __init__.py
│   │
│   ├───migrations
│   │   │   __init__.py
│   │   │
│   │   └───__pycache__
│   │           __init__.cpython-36.pyc
│   │
│   ├───static
│   │   └───main
│   │           main.js
│   │           pdf.pdf
│   │
│   ├───templates
│   │   └───voyage
│   │           home.html
│   │
│   └───__pycache__
│           admin.cpython-36.pyc
│           models.cpython-36.pyc
│           urls.cpython-36.pyc
│           views.cpython-36.pyc
│           __init__.cpython-36.pyc
│
└───stack
    │   settings.py
    │   urls.py
    │   wsgi.py
    │   __init__.py

I created a new project and this worked well for me, follow my steps:

In your settings.py, add in INSTALLED_APPS your app name.
The complete HTML code:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>
 <h1>test</h1>
 <canvas id="the-canvas"></canvas>
</body>

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="static/main/main.js"></script>

</html>

In your project, you should have created a folder named static, inside it a folder with the name of the app, inside it you can put your static files, i.e:css/js
In my static/main i added a pdf file named pdf and main.js
In my main.js i have this code added to render the first page of the pdf.pdf

pdfjsLib.getDocument('/static/main/pdf.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);

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

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

BEWARE i used very simplistic python/django coding style it's meant just for speed purpose so you may change what i've done also the static files are not served correctly so if you want to deploy your app on a server like Apache or Nginx, see for it.

Thank you, your answer work and I would like to get some additional advices in order to go further. It works for 1 id and in my case, I'm looping over django variable so my id looks like this : `id='the-canvas_{{document.id}}'`. Is it possible to add in customPdf.js something like this : `var document_id = "{{document.id}}"; var canvas = document.getElementById('the-canvas_'+document_id);` ? — Essex, Sep 25 '18 at 12:19
Okay here's my suggestion : First in your div that contains the publications, each one of them have a glyphicon than open a new window for the pdf file, create a GET request form that pass the id over the request and then in your django view pass the id into the context of you pdf rendering page. — Unicone, Sep 25 '18 at 16:43

Django - JS : How to display the first PDF page as cover

2 Answers2

Linked