Как передать переменную Django в Javascript

Question

Я хотел бы получить некоторую помощь для передачи переменной Django в шаблоне HTML в переменную 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

Может, кто-нибудь может мне помочь?Я не знаю, но я думаю, что мне нужно добавить цикл в JS в соответствии с этим циклом Django {% for document in publication.documents.all %}?

Answer 1

Поместите вашу переменную 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>

Сценарий, желательно непосредственно перед

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

Answer 2

Благодаря Дэниелу Роузману я нашел ответ и изо всех сил стараюсь отобразить титульную страницу 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 %}

Требуетсявсего 3-4 секунды, чтобы загрузить весь PDF (возможно, есть другой способ сделать это быстрее), но это работает!

Answer 3

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

Проверьте, есть ли какие-либо данные

Он должен печатать данные, если у вас есть, или он даст вам пустой массив