Как использовать bootstrap с xhtml2pdf?

Мне нужно динамически отображать PDF файлы в веб-приложении Django.

Я понимаю, что есть 2 варианта :

  1. Рендеринг файла html-шаблона, затем преобразование его в PDF-файл.
    Я использовал библиотеку Python xhtml2pdf.
    Проблема в том, что в шаблоне, который я хочу использовать, есть bootstrap, а он не поддерживается xhtml2pdf. Фактически не поддерживается javascript, и генерируемые PDF ужасны.
    Я должен сам писать html / css, чего я не хочу.
    Как решить эту проблему?
    Есть ли альтернативная библиотека?

  2. Преобразование веб-страницы в PDF файл напрямую


    3. У меня тоже была такая проблема. Я решил эту проблему с помощью html2canvas и jspdf.

    Вот мой код. И используйте его, модифицируя под себя.

    // on click 
<script src="{% static '/js/html2canvas.min.js' %}"></script>
<script src="{% static '/js/jspdf.min.js' %}"></script>

<script>
const page = document.getElementById('element that you want to make pdf')

$('#{{save_btn_id}}').click(function () {
  html2canvas(page).then(async function (canvas) { 
    // convert canvas to image
    let imgData = canvas.toDataURL('image/png');

    let imgWidth = 190; // image width (mm)
    let pageHeight = imgWidth * 1.414; 
    let imgHeight = canvas.height * imgWidth / canvas.width;
    let heightLeft = imgHeight;
    let margin = 10; 
    let doc = new jsPDF('p', 'mm');
    let position = 0;

    doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    // if page > 1
    while (heightLeft >= 20) {
      position = heightLeft - imgHeight;
      doc.addPage();
      doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
    }

    
    doc.save('{{file_name}}-{{docNum}}.pdf');
})
</script>
    Вернуться на верх