如何将 Django 变量传递给 Javascript

Posted 2023-02-23

【中文标题】如何将 Django 变量传递给 Javascript

【英文标题】：How to pass Django variable into Javascript

【发布时间】：2019-03-01 23:56:39

【问题描述】：

我想获得一些帮助，将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 循环 % for document in publication.documents.all % 在我的 JS 中添加一个循环？

【问题讨论】：

***.com/questions/8683922/…

但document 仅在循环内的范围内，而您的 JS——即使它在同一个文件中——也不在该循环内。

你为什么不能把它放在那里？ JS 可以放在 HTML 文件中的任何位置。

嗯，我不知道，因为我认为JS只在最后执行，即使JS脚本放在HTML文件的开头或结尾。

可能您正在重叠所有这些文档。通过提供不同的视口，一一解析它们。

【参考方案1】：

感谢 Daniel Roseman，我找到了答案并克服了为每个文档显示 PDF 封面的问题。

这是我的包含 JS 脚本的 HTML 文件：

% 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 秒（也许有另一种更快的方法），但它确实有效！

【参考方案2】：

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

脚本，最好在

【参考方案3】：

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

检查是否有数据

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

【讨论】：

我不确定您的代码是否可以工作，因为正如@DanielRoseman 所说，我必须在 Django 循环中设置我的 JS 脚本。如果我从您的代码中打印数据，我假设该数组将始终为空。

我想你的意思是console.log(document_upload)