Как сделать PDF из javascript

Иногда бывает необходимо сохранить в PDF, данные с HTML или какой-то результат вычислений js. Такой вариант вполне подойдет тем, кто не хочет лезть в изучение серверных технологий, позволяющих сделать тоже самое. Итак, описание способа ниже:

Чтобы сохранить данные в PDF с корректной поддержкой кириллицы, лучше использовать библиотеку pdfmake, которая:

1. поддерживает кириллицу (при подключении шрифта);
2. легко работает с таблицами и JSON-данными;
3. не требует серверной части.

Подключение (через CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

Создадим HTML-таблицу с данными:

<table id="myTable78">
  <tr>
    <th>Имя</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Алексей</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Ольга</td>
    <td>Санкт-Петербург</td>
  </tr>
</table>

Добавим кнопку

<button onclick="exportTableToPDF()">Сохранить в PDF</button>

<script>
  function exportTableToPDF() {
    const table = document.getElementById('myTable78');
    const body = [];

    for (let row of table.rows) {
      const rowData = [];
      for (let cell of row.cells) {
        rowData.push(cell.innerText);
      }
      body.push(rowData);
    }

    const docDefinition = {
      content: [
        { text: 'Таблица пользователей', style: 'header' },
        {
          table: {
            body: body
          }
        }
      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
          margin: [0, 0, 0, 10]
        }
      },
      defaultStyle: {
        font: 'Roboto'
      }
    };

    pdfMake.createPdf(docDefinition).download("table.pdf");
  }
</script>

Тесты и проверки

Скачать пример 1

Другой пример собираем PDF из данных JSON

Предположим у нас откуда-то приходят данные в формате JSON или они получаются в процессе обработки нашего скрипта. Для примера будет так, что как будто они у нас есть.

Создадим кнопку

<button onclick="generatePDFfromJSON()">Создать PDF из JSON</button>

Добавим JS

<script>
    const jsonData = [
      { name: "Алексей", city: "Москва", age: 32 },
      { name: "Ольга", city: "Санкт-Петербург", age: 28 },
      { name: "Иван", city: "Новосибирск", age: 45 }
    ];

    function generatePDFfromJSON() {
      const body = [
        ['Имя', 'Город', 'Возраст']
      ];

      jsonData.forEach(item => {
        body.push([item.name, item.city, item.age.toString()]);
      });

      const docDefinition = {
        content: [
          { text: 'Список пользователей из JSON', style: 'header' },
          {
            table: {
              headerRows: 1,
              body: body
            }
          }
        ],
        styles: {
          header: {
            fontSize: 18,
            bold: true,
            margin: [0, 0, 0, 10]
          }
        },
        defaultStyle: {
          font: 'Roboto'
        }
      };

      pdfMake.createPdf(docDefinition).download("users-from-json.pdf");
    }
  </script>

Скачать пример 2