Блог

Главная - Вопросы по программированию - Извлечение html-шаблона django в pdf

Извлечение html-шаблона django в pdf

#javascript #pdf #jspdf #html2canvas

Вопрос:

Я пытаюсь экспортировать HTML-шаблон Django в pdf, для этого я следовал этому уроку, используя jsPDF и html2canvas, ради публикации вопроса здесь я воспроизвел то, что у меня есть в моем HTML-шаблоне Django в приведенном ниже фрагменте с фиктивной таблицей, все то же самое. Кнопка, похоже, ничего не делает и не извлекает никаких PDF-файлов.

     function getPDF(){

        var HTML_Width = $(".canvas_div_pdf").width();
        var HTML_Height = $(".canvas_div_pdf").height();
        var top_left_margin = 15;
        var PDF_Width = HTML_Width (top_left_margin*2);
        var PDF_Height = (PDF_Width*1.5) (top_left_margin*2);
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height;
        
        var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
        

        html2canvas($(".canvas_div_pdf")[0],{allowTaint:true}).then(function(canvas) {
            canvas.getContext('2d');
            
            console.log(canvas.height "  " canvas.width);
            
            
            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);
            pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
            
            
            for (var i = 1; i <= totalPDFPages; i  ) { 
                pdf.addPage(PDF_Width, PDF_Height);
                pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i) (top_left_margin*4),canvas_image_width,canvas_image_height);
            }
            
            pdf.save("HTML-Document.pdf");
        });
    }; 
 .cann {
border: 3px solid darkgrey;
padding: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
width: 650px;
height: 250px;
margin-left: 3em;


}

h1 {
 text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
} 
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- semantic UI -->
    <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
    <!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"> </script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<script>
$(document).ready(function (){
Chart.register(ChartDataLabels);
var ctx = document.getElementById('myChart');
window.myChart = new Chart(ctx, {

 type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        data: [12, 19, 3, 5, 2, 3],
        label: 'Advisor Closed MTD',
        backgroundColor: 'rgb(192,111,94)',
        barThickness: 25,
        datalabels: {
          color: '#FFCE56'
        }

      }],
    },
    options: {
      responsive: false,
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          labels: {
            value: {
              color: 'blue'
            }
          }

        }
      }
    }
}
);
});




</script>
<div class="canvas_div_pdf" >
<h1> My chart </h1>
<canvas id="myChart" class="cann"></canvas>
</div>
<br>
<button onclick="getPDF()">Generate PDF</button>
Метки: