Django Как собрать HTML для {% include%} и назначить переменную JS - PullRequest
0 голосов
/ 10 октября 2019

Я использую JSPDF для преобразования HTML в PDF. Это очень просто, если у меня есть отрендеренная страница, а затем щелчок по кнопке просто экспортирует соответствующий PDF, однако я пытаюсь создать квитанцию ​​с помощью JSPDF, и рендеринг страницы перед предоставлением PDF не является хорошим вариантом.

При этом я использую Django, и в основном я хочу использовать html-шаблон для отображения необходимой мне квитанции:

Например:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>

let doc = new jsPDF();
$('#click').click(function () {
   let a  = {% include 'receipt_template.html' with data=payment_data %};
   doc.fromHTML(a, 0, 0, {
      'width': 170
   });
   doc.save('receipt.pdf');
});

Но этоне работает, так как я не собираю HTML шаблона, я буквально отображаю его на странице. Возможно ли то, что я пытаюсь сделать?

1 Ответ

0 голосов
/ 10 октября 2019

Вы присваиваете html-код своей переменной a.

Просто укажите свой включенный шаблон в кавычках - обновите этот код до:

let a  = `{% include 'receipt_template.html' with data=payment_data %}`;

Обновите

Как сказал @ Daniel Roseman , может быть проблема с выходом.

В моем примере вы не можете использовать ` в receipt_template.html и включить его в него. Вам необходимо их избежать.

Обновление 2

Также вы можете использовать JSX для обработки включенного шаблона непосредственно в переменную js.

Тогда ваш код будетбыть похожим на это:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  let doc = new jsPDF();
  $('#click').click(function () {
   let a  = ({% include 'receipt_template.html' with data=payment_data %});
   doc.fromHTML(a, 0, 0, {
    'width': 170
   });
   doc.save('receipt.pdf');
  });
</script>

Однако вам почти никогда не нужно использовать этот подход.

...