У меня есть простой 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');
    }
  });
});

});

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
carreankush 6 Ноя 2018 в 22:01

2 ответа

Лучший ответ

Вы должны установить высоту 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

1
Nimitt Shah 6 Ноя 2018 в 21:35

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

Сделайте horizontalRescale и verticalRescale одинаковыми значениями

var downscaleFactor= 0.70;

context.scale( downscaleFactor, downscaleFactor );

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

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

0
Nimitt Shah 6 Ноя 2018 в 20:17