Преобразование HTML в PDF, скачивание (html2canvas и jsPDF)

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas - это окончательно отрендеренный элемент <canvas>
    }
});

html2canvas(element, {
    onrendered: function(canvas) {
       document.body.appendChild(canvas);
    }
});

// По умолчанию PDF размером A4, вертикальное расположение, единицы измерения в мм
var doc = new jsPDF();

// Добавление текста 'Скачать PDF'
doc.text('Скачать PDF!', 10, 10);
doc.save('a4.pdf');

// Три параметра: первый - ориентация, второй - единицы измерения, третий - формат размера
var doc = new jsPDF('landscape', 'pt', [205, 115]);

// Преобразование изображения в dataUrl
var imageData = 'data:image/png;base64,iVBORw0KGgo...';

doc.addImage(imageData, 'PNG', 0, 0, 205, 115);
doc.save('a4.pdf');

// Три параметра: первый - ориентация, второй - размер, третий - формат размера
var doc = new jsPDF('landscape', 'pt', [205, 155]);

// Преобразование изображения в dataUrl
var imageData = 'data:image/png;base64,iVBORw0KGgo...';

// Установка размера шрифта
doc.setFontSize(20);

// Параметры 10, 20 контролируют расстояние текста от левого края и верхнего края
doc.text('Stone', 10, 20);

// Параметры 0, 40 контролируют расстояние текста от левого края и верхнего края
doc.addImage(imageData, 'PNG', 0, 40, 205, 115);
doc.save('a4.pdf');
```Онлайн-демонстрация [demo4](https://linwalker.github.io/render-html-to-pdf/demo4.html)

Для создания PDF необходимо добавить преобразованные элементы в экземпляр jsPDF. Также есть возможность добавления HTML, но некоторые элементы не могут быть добавлены в PDF, поэтому можно использовать метод html2canvas + jsPDF для преобразования страницы в PDF. С помощью html2canvas можно перебрать элементы страницы и сгенерировать canvas, а затем добавить изображение из canvas в формате dataUrl в экземпляр jsPDF, создавая PDF.

## html2canvas + jsPDF

#### Одностраничный PDF

Изменение примера demo1:

```javascript
<script type="text/javascript" src="./js/jsPdf.debug.js"></script>
<script type="text/javascript">
      var downPdf = document.getElementById("renderPdf");
      downPdf.onclick = function() {
          html2canvas(document.body, {
              onrendered: function(canvas) {

                  // Получение dataURL изображения, параметры: формат изображения и качество (0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  // Ориентация по умолчанию - вертикальная, размер points, формат a4[595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');

                  // Параметры после addImage контролируют размер добавляемого изображения, здесь высота страницы сжата в соотношении a4 бумаги
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);

(например, `var pdf = new jsPDF('', 'pt', 'a4');` в демонстрации используется размер листа A4).
- Метод `addImage` имеет два параметра, которые контролируют положение изображения на PDF-документе.

Хотя каждая страница PDF содержит одно и то же изображение, мы можем создать иллюзию разбиения на страницы, изменяя положение изображения. Например, на второй странице горизонтальное смещение устанавливается в `-841.89`, что соответствует высоте листа A4. Поскольку изображение, выходящее за пределы высоты листа A4, не отображается, на второй странице отображается только часть изображения, соответствующая диапазону [841.89, 1682.78] по вертикали. Это позволяет создать иллюзию разбиения на страницы, и так далее.```Вот пример кода:

```javascript
html2canvas(document.body, {
  onrendered: function(canvas) {

      var contentWidth = canvas.width;
      var contentHeight = canvas.height;

      // Высота одной страницы PDF
      var pageHeight = contentWidth / 592.28 * 841.89;
      // Оставшаяся высота контента
      var leftHeight = contentHeight;
      // Смещение страницы
      var position = 0;
      // Размеры листа A4 [595.28, 841.89] и размеры изображения в PDF
      var imgWidth = 595.28;
      var imgHeight = 592.28 / contentWidth * contentHeight;

      var pageData = canvas.toDataURL('image/jpeg', 1.0);

      var pdf = new jsPDF('', 'pt', 'a4');

      // Если оставшаяся высота контента меньше высоты одной страницы PDF, не нужно разделять на страницы
      if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
          while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              // Предотвратить добавление пустых страниц
              if (leftHeight > 0) {
                  pdf.addPage();
              }
          }
      }

      pdf.save('content.pdf');
  }
})

var imgWidth = 555.28;
var imgHeight = 555.28 / contentWidth * contentHeight;
...
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
...
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);