В настоящее время фреймворки намного мощнее, чтобы выполнять некоторые вычисления и снижать нагрузку на сервер. Так что теперь лучше запрашивать серверы для загрузки файла, вы можете скачать его напрямую. Нам часто требуется загружать счета-фактуры, квитанции или что-либо еще в формате pdf. Таким образом, мы можем добиться этого, просто преобразовав HTML в PDF.
Это может быть достигнуто просто в 3 шага.
Шаг 1:
Установите библиотеку с именем jsPdf, она дает несколько вариантов генерации pdf. Мы рассмотрим только генератор html в pdf.
npm i jspdf
Шаг 2:
В родительском контейнере добавьте свойство ref с именем, как показано ниже:
ref — это специальный атрибут, аналогичный атрибуту key. Это позволяет нам получить прямую ссылку на конкретный элемент DOM или экземпляр дочернего компонента после его монтирования. Через атрибут ref мы получим доступ к контейнеру в методе библиотеки jspdf, который мы рассмотрим ниже.
ШАГ 3:
Теперь мы создадим функцию с именем download, которая будет вызываться при нажатии кнопки. Функция скачать содержит следующее определение.
Другие свойства, такие как ширина, x, y, будут устанавливать контент. Если вы хотите, чтобы контент загружался с помощью css, а затем конвертировал html в холст, вы можете изучить параметр jsPdf html2canvas для лучшего понимания.
Теперь, наконец, подключите функцию загрузки к кнопке загрузки, и вуаля! 🍻 Таким образом, ваш html будет загружен в формате pdf.
Вывод:
Вот как вы можете загрузить html в pdf за 3 маленьких шага. Это относится не только к vuejs, его можно использовать с любым другим фреймворком, просто изменится метод доступа к html. В jsPDF гораздо больше параметров, таких как html2canvas, ширина, высота и т. д., вы можете изучить их в doc.
Вы можете найти код в этом репозитории и не стесняйтесь добавлять к нему свои мнения.
