Как показать прокручиваемое все содержимое div в pdf, используя html2canvas - PullRequest
Новая
       15

Как показать прокручиваемое все содержимое div в pdf, используя html2canvas

0 голосов
/ 06 ноября 2018

У меня есть простой div с номером абзаца, который имеет определенную высоту и вертикальную прокрутку за пределами высоты. Когда я загружаю pdf, отображается только видимая часть div. Но мне нужно показать все содержимое. это код.

HTML 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js">
</script>
<div id="content">
      <p>This is the element you only want to capture</p>   
       <p>This is the element you only want to capture</p>  
        <p>This is the element you only want to capture</p> 
         <p>This is the element you only want to capture</p>    
          <p>This is the element you only want to capture</p>   
    </div>
    <button id="print">Download Pdf</button>
    <footer>This is the footer</footer>

Javascript 

(document).ready(function() {
 $('#print').click(function() {

  var w = document.getElementById("content").offsetWidth;
  var h = document.getElementById("content").offsetHeight;
  html2canvas(document.getElementById("content"), {

    dpi: 300, // Set to 300 DPI
    scale: 3, // Adjusts your resolution
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/jpeg", 1);
      var doc = new jsPDF('L', 'px', [w, h]);
      doc.addImage(img, 'JPEG', 0, 0, w, h);
      doc.addPage();
      doc.save('sample-file.pdf');
    }
  });
});

});

1009 * CSS * body { background: beige; } header { background: red; } footer { background: blue; } #content { background: yellow; width: 70%; height: 100px; margin: 50px auto; border: 1px solid orange; padding: 20px; overflow-y:auto; } .html2canvas-container { width: 3000px !important; height: 3000px !important; }

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Вы должны установить высоту auto, а затем, как только изображение будет сгенерировано, установить высоту на желаемую высоту. Таким образом, вы можете захватить весь контент.

Добавьте эту строку document.getElementById("content").style.height="auto"; после получения offsetWidth и offsetHeight.

И добавить эту строку document.getElementById("content").style.height="100px"; после завершения html2canvas. 

$(document).ready(function() {
     $('#print').click(function() {
     var currentPosition = document.getElementById("content").scrollTop;
      var w = document.getElementById("content").offsetWidth;
      var h = document.getElementById("content").offsetHeight;
     document.getElementById("content").style.height="auto";

      html2canvas(document.getElementById("content"), {

        dpi: 300, // Set to 300 DPI
        scale: 3, // Adjusts your resolution
        onrendered: function(canvas) {
          var img = canvas.toDataURL("image/jpeg", 1);
          var doc = new jsPDF('L', 'px', [w, h]);
          doc.addImage(img, 'JPEG', 0, 0, w, h);
          doc.addPage();
          doc.save('sample-file.pdf');
        }
      });
     document.getElementById("content").style.height="100px";
     document.getElementById("content").scrollTop = currentPosition;
    });

});

Если он не загружается из приведенного выше фрагмента, вы можете проверить его здесь

Обновление 1

Добавить p тег на каждой странице jsfiddle

0 голосов
/ 06 ноября 2018

Команда context.scale(horizontalRescale,verticalRescale) будет уменьшать каждый следующий чертеж на указанные вами проценты HorizontalRescale и verticalRescale.

Сделать horizontalRescale и verticalRescale одинаковое значение 

var downscaleFactor= 0.70;

context.scale( downscaleFactor, downscaleFactor );

Этот код сжимает узел до 70% от исходного размера.

Я надеюсь, что это ответит на ваш вопрос

...