javascript - 如何将 Django 变量传递给 Javascript

Question

我想获得一些帮助，将 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 %}

然后，我想使用 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 %} ?

Answer 1

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

检查是否有一些数据

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