如何将 Django 变量传递给 Javascript
How to pass Django variable into Javascript
我想获得一些帮助,将 HTML
模板中的 Django
变量传递给 Javascript
变量。
我相信这会很容易,但直到现在,我还没有克服去做那件事。特别是对于 Django for loop.
我有这样一段 HTML 代码:
{% for document in publication.documents.all %}
<table class="table table-condensed">
<tbody>
<tr>
<td class="col-md-1">
<canvas id="test{{ document.id }}"></canvas>
</td>
</tr>
</tbody>
</table>
{% endfor %}
然后,我想用Javascript代码来显示每个文档的PDF。
所以,我对 JS 有这样的看法:
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
var document_upload = "{{ document.upload }}"; //Django variable
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>
但我的模板中没有任何内容。
如果我为这些制作 console.log()
:
var document_upload = "{{ document.upload }}"; //returns blank
var document_upload = {{ document.upload }} //returns Undefined
也许有人可以帮助我?
我不知道,但我想我也需要根据这个 Django 循环在我的 JS 中添加一个循环 {% for document in publication.documents.all %}
?
<script>
const document_upload = {{document | safe}}
console.log(document.upload)
</script>
检查是否有数据
如果你有数据,它应该打印数据,否则它会给你一个空数组
将您的 django 变量作为数据元素放入 html 中。然后 运行 循环渲染 pdf。您的变量仅在 {% for %}
循环内可用,因此您要么将 js 放入循环内(不要这样做),要么这样做。
我添加的脚本使用jQuery,所以不要忘记添加它。
{% for document in publication.documents.all %}
<table class="table table-condensed">
<tbody>
<tr>
<td class="col-md-1">
<canvas class="my-canvas" data-upload="{{ document.upload }}" id="test{{ document.id }}"></canvas>
</td>
</tr>
</tbody>
</table>
脚本,最好在< /body>之前
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
// add jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.my-canvas').each(function(){
var document_upload = $(this).data('upload'); // Django variable saved as data attribute
console.log(document_upload);
/* Do rest of your pdf.js stuff here */\
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>
感谢 Daniel Roseman,我找到了答案并克服了显示每个文档的 PDF 封面的困难。
这是我的 HTML 包含 JS 脚本的文件:
{% for document in publication.documents.all %}
<table class="table table-condensed">
<tbody>
<tr>
<td class="col-md-1">
{% if document.format == 'pdf' %}
<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) {
pdf.getPage(1).then(function (page) {
var scale = 0.30;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('test{{ document.id }}');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
<canvas id="test{{ document.id }}" style="border:1px solid #000000;"></canvas>
{% else %}
<span class="glyphicon glyphicon-blackboard"></span>
{% endif %}
</td>
</tr>
</tbody>
</table>
{% endfor %}
加载所有 PDF 仅需 3-4 秒(也许还有另一种方法可以更快),但它确实有效!
我想获得一些帮助,将 HTML
模板中的 Django
变量传递给 Javascript
变量。
我相信这会很容易,但直到现在,我还没有克服去做那件事。特别是对于 Django for loop.
我有这样一段 HTML 代码:
{% for document in publication.documents.all %}
<table class="table table-condensed">
<tbody>
<tr>
<td class="col-md-1">
<canvas id="test{{ document.id }}"></canvas>
</td>
</tr>
</tbody>
</table>
{% endfor %}
然后,我想用Javascript代码来显示每个文档的PDF。
所以,我对 JS 有这样的看法:
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
var document_upload = "{{ document.upload }}"; //Django variable
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>
但我的模板中没有任何内容。
如果我为这些制作 console.log()
:
var document_upload = "{{ document.upload }}"; //returns blank
var document_upload = {{ document.upload }} //returns Undefined
也许有人可以帮助我?
我不知道,但我想我也需要根据这个 Django 循环在我的 JS 中添加一个循环 {% for document in publication.documents.all %}
?
<script>
const document_upload = {{document | safe}}
console.log(document.upload)
</script>
检查是否有数据
如果你有数据,它应该打印数据,否则它会给你一个空数组
将您的 django 变量作为数据元素放入 html 中。然后 运行 循环渲染 pdf。您的变量仅在 {% for %}
循环内可用,因此您要么将 js 放入循环内(不要这样做),要么这样做。
我添加的脚本使用jQuery,所以不要忘记添加它。
{% for document in publication.documents.all %}
<table class="table table-condensed">
<tbody>
<tr>
<td class="col-md-1">
<canvas class="my-canvas" data-upload="{{ document.upload }}" id="test{{ document.id }}"></canvas>
</td>
</tr>
</tbody>
</table>
脚本,最好在< /body>之前
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
// add jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.my-canvas').each(function(){
var document_upload = $(this).data('upload'); // Django variable saved as data attribute
console.log(document_upload);
/* Do rest of your pdf.js stuff here */\
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>
感谢 Daniel Roseman,我找到了答案并克服了显示每个文档的 PDF 封面的困难。
这是我的 HTML 包含 JS 脚本的文件:
{% for document in publication.documents.all %}
<table class="table table-condensed">
<tbody>
<tr>
<td class="col-md-1">
{% if document.format == 'pdf' %}
<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) {
pdf.getPage(1).then(function (page) {
var scale = 0.30;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('test{{ document.id }}');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
<canvas id="test{{ document.id }}" style="border:1px solid #000000;"></canvas>
{% else %}
<span class="glyphicon glyphicon-blackboard"></span>
{% endif %}
</td>
</tr>
</tbody>
</table>
{% endfor %}
加载所有 PDF 仅需 3-4 秒(也许还有另一种方法可以更快),但它确实有效!