如何将Django变量传递到Javascript中

我想获得一些帮助，将

HTML

模板中的

Django

变量传递到

Javascript

变量中

我相信这很容易，但到目前为止，我还没有克服这个困难。尤其是使用Django

for循环。

我有一段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 %}

也许有人能帮我？ 我不知道，但我想我也需要在JS中添加一个循环，根据这个Django循环

{%for publication.documents.all%}

？

<script>
   const document_upload = {{document | safe}}
   console.log(document.upload)
</script>

const document_upload={{document|safe}
console.log（document.upload）

检查是否有一些数据

---

如果您有数据，它应该打印数据，否则它将给您一个空数组

将您的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>

{%用于publication.documents.all%}

脚本，最好在

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

//添加jQuery
$（文档）.ready（函数（）{
$（'.my canvas'）。每个（函数（）{
var document_upload=$（this）.data（'upload'）；//Django变量另存为数据属性
控制台日志（文件上传）；
/*在这里做你的pdf.js的其他东西*/\
pdfjsLib.getDocument（'http://localhost:8000/media/“+文件上传）。然后（函数（pdf）{
console.log（“加载pdf”）；
getPage（1）。然后（函数（第页）{
var标度=0.30；
var viewport=page.getViewport（比例）；
var canvasses=document.getElementsByTagName（'canvas'）；
数组.from（画布）.forEach（（画布）=>{
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
page.render（renderContext）；
});
});
});
});
});

多亏了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 %}

{%用于publication.documents.all%}
{%if document.format='pdf%}
var document_upload=“{{document.upload}}”；
pdfjsLib.getDocument（'http://localhost:8000/media/“+文件上传）。然后（函数（pdf）{
getPage（1）。然后（函数（第页）{
var标度=0.30；
var viewport=page.getViewport（比例）；
var canvas=document.getElementById（'test{{document.id}'）；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
page.render（renderContext）；
});
});
{%else%}
{%endif%}
{%endfor%}

---

只需3-4秒就可以加载所有PDF（也许有另一种方法可以更快地加载），但它可以工作

但是

document

只在循环中的作用域内，而你的JS——即使它在同一个文件中——也不在循环中。为什么你不能把它放在那里呢？JS可以放在HTML文件中的任何地方。嗯，我不知道，因为我认为JS只在最后执行，即使JS脚本放在HTML文件的开头或结尾。可能你重叠了所有这些文档。通过提供不同的视口逐个解析它们。我不确定您的代码是否能正常工作，因为正如@DanielRoseman所说，我必须在Django循环中设置JS脚本。如果我从你的代码中打印数据，我想数组总是空的。我想你的意思是

console.log（document\u upload）

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

{% 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 %}