vue3 generates HTML web content into PDF files

Use html2pdf.js to implement
npmjs address: html2pdf.js
github warehouse address: html2pdf.js

The method of using html2pdf.js is very simple. You only need to get the HTML elements to generate PDF.

Install

npm i html2pdf.js

introduce

First introduce it on the page where you need to use the export

import html2pdf from "html2pdf.js";

use

Basic configuration, page margin, file name, generated picture type and quality, etc., you can adjust it by yourself. For
specific configuration items, see html2pdf.js#Options of npmjs or html2pdf.js#options of github

let opt = {
  margin: [0.5, 0.6],
  filename: "文件名",
  image: { type: "jpeg", quality: 0.98 },
  html2canvas: { scale: 3 },
  jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
};

The basic process of saving as PDF, using the html2pdf export method, setting the export configuration, and saving other workflow methods optfrom the export node can be found in npmjs's html2pdf.js#worker-api or github's html2pdf.js#worker-apinode

html2pdf().set(opt).from(node).save();

Manual paging

Add the following code to the imported node to manually paginate. Add after which node to indicate where to paginate.

<div class="html2pdf__page-break"></div>