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 :
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 :
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 :
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 :
var document_upload = {{ document.upload }}
Cela me retourne : Undefined
var document_upload = "{{ document.upload }}";
Cela retourne un "blank"
J'affiche le code avec un
console.log(document_upload);
PDF.js dans un template HTML
R�pondre avec citation
Partager