PDF.js dans un template HTML

Bonjour tout le monde,

Je me permets de poser ma question ici car je bloque sr mon problème depuis maintenant plusieurs jours sans pouvoir trouver une quelconque solution.
Je développe un projet sous Django et je rencontre une difficulté à faire fonctionner un petit script JS dans un template HTML.

Objectif :

J'affiche un tableau de publications avec une publication (objet) par ligne disposant de différentes informations : format, langue, titre.
A la fin de chaque ligne, je souhaite également insérer une "preview" de la première page pour chaque publication.
J'utilise donc la librairie PDF.js afin d'effectuer cette tâche.
L'idéal serait de pouvoir passer la souris sur une icone et d'afficher dans une petite fenêtre de type popup la prévisualisation de la première page de chaque publication.

Ce que j'obtiens actuellement :

Actuellement, j'arrive à afficher la première page d'un PDF, mais en définissant une URL fixe pointant vers un unique PDF.
Je n'arrive pas à boucler sur chaque PDF pour afficher la première page de chaque publication.
Pour ce faire je dois mêler mes variables Django avec le code Javascript et c'est là que ça coince.

Voici mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
{% for category in category_list %}
        <div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
                   href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
                  <i class="more-less glyphicon glyphicon-plus"></i>
                  {{ category }}
                  {% for publication in category.publication.all %}
                    {% for document in publication.documents.all %}
                      {% if document.publication.new_publication == True %}
                        <span class="glyphicon glyphicon-flag"></span>
                      {% endif %}
                    {% endfor %}
                  {% endfor %}
                </a>
              </h4>
            </div>
              <div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
                   aria-labelledby="#accordion_{{ category.id }}">
                {% for publication in category.publication.all %}
                <div class="panel panel-default subpanel">
                  <b>{{ publication }}</b>
                  {% for document in publication.documents.all %}
                    {% if document.publication.new_publication == True %}
                      <span class="glyphicon glyphicon-flag"></span>
                    {% endif %}
                  {% endfor %}
                <div class="panel-body">
                  {% for document in publication.documents.all %}
                    <table class="table table-condensed">
                      <tbody>
                      <tr>
                        <td class="col-md-1">
                          <input type="checkbox" class="fakeRadio" name="DocumentChoice" value="{{ document.id }}"></td>
                        <td class="col-md-1">
                          {% if document.format == 'pdf' %}
                            <span class="badge alert-danger">{{ document.format }}</span>
                          {% endif %}
                          {% if document.format == 'epub' %}
                            <span class="badge alert-info">{{ document.format }}</span>
                          {% endif %}
                        </td>
                        <td class="col-md-1"> {{ document.language }}</td>
                        <td class="col-md-1"> <i>{{ document.title }}</i></td>
                        <td class="col-md-1">
                          {% if document.publication.new_publication == True %}
                            <span class="glyphicon glyphicon-flag"></span>
                          {% else %}
                            <span></span>
                          {% endif %}
                        </td>
                        <td class="col-md-1">
                          <canvas id="test{{ document.id }}" style="border:1px solid #000000;"></canvas>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  {% endfor %}
                </div>
                </div>
                {% endfor %}
              </div>
          </div>
        </div>
      {% endfor %}

La partie qui m'intéresse se trouve ici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% for document in publication.documents.all %}
                    <table class="table table-condensed">
                      <tbody>
                      <tr>
                        <td class="col-md-1">
                          <input type="checkbox" class="fakeRadio" name="DocumentChoice" value="{{ document.id }}"></td>
                        <td class="col-md-1">
                          {% if document.format == 'pdf' %}
                            <span class="badge alert-danger">{{ document.format }}</span>
                          {% endif %}
                          {% if document.format == 'epub' %}
                            <span class="badge alert-info">{{ document.format }}</span>
                          {% endif %}
                        </td>
                        <td class="col-md-1"> {{ document.language }}</td>
                        <td class="col-md-1"> <i>{{ document.title }}</i></td>
                        <td class="col-md-1">
                          {% if document.publication.new_publication == True %}
                            <span class="glyphicon glyphicon-flag"></span>
                          {% else %}
                            <span></span>
                          {% endif %}
                        </td>
                        <td class="col-md-1">
                          <canvas id="test{{ document.id }}" style="border:1px solid #000000;"></canvas>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  {% endfor %}

Avec le canvas à la fin du code. Ce canvas doit permettre d'afficher mon PDF pour chaque publication.

Avec cela j'ai un petit script javascript qui est écrit de la façon suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
 
<script type="text/javascript">
  var document_upload = "{{ document.upload }}";
  pdfjsLib.getDocument('http://localhost:8000/media/'+document_upload).then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.30;
        var viewport = page.getViewport(scale);
 
        var canvases = document.getElementsByTagName('canvas');
        Array.from(canvases).forEach((canvas) => {
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
 
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
  });
  </script>

Néanmoins, rien ne s'affiche pour le moment et je pense qu'il y a un problème avec la variable que je récupère ?
Comment l'intégrer au code JS ?

Merci d'avance

EDIT :

Peut-être quelques pistes :

Code:

var document_upload = {{ document.upload }}

Cela me retourne : Undefined

Code:

var document_upload = "{{ document.upload }}";

Cela retourne un "blank"

J'affiche le code avec un

Code:

console.log(document_upload);