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);