生成pdf时在JsPDF中添加Css_在jspdf中插入图像停止生成pdf_如何在从jsPDF生成的PDF中添加水印？ - 腾讯云开发者社区

基础概念

jsPDF 是一个用于生成 PDF 文件的 JavaScript 库。它允许你在客户端生成 PDF 文件，而不需要服务器端的支持。CSS 是层叠样式表（Cascading Style Sheets）的缩写，用于描述 HTML 或 XML（包括 SVG 和 XHTML）文档的外观和格式。

类型

jsPDF 支持多种类型的 PDF 文件生成，包括但不限于：

单页 PDF
多页 PDF
图片和文本混合的 PDF
包含表格和图表的 PDF

应用场景

在线表单生成
报告和文档生成
电子发票和收据生成
图书和杂志的电子版生成

添加 CSS 的问题

在 jsPDF 中直接添加 CSS 样式是比较困难的，因为 jsPDF 主要处理的是 PDF 的底层绘图命令，而不是 HTML 和 CSS。不过，可以通过以下几种方法来实现类似的效果：

方法一：使用 HTML 和 CSS 渲染为 PDF

可以使用 html2canvas 库将 HTML 和 CSS 渲染为 canvas，然后再将 canvas 转换为 PDF。

<!DOCTYPE html>
<html>
<head>
    <title>Generate PDF with CSS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
    <div id="content">
        <h1>Hello World</h1>
        <p>This is a sample text with some <strong>bold</strong> and <em>italic</em> text.</p>
    </div>
    <button onclick="generatePDF()">Generate PDF</button>

    <script>
        function generatePDF() {
            html2canvas(document.getElementById("content")).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF();
                pdf.addImage(imgData, 'PNG', 0, 0);
                pdf.save('sample.pdf');
            });
        }
    </script>
</body>
</html>

方法二：手动添加样式

可以通过 jsPDF 的绘图命令手动添加样式，但这需要更多的代码和计算。

const doc = new jsPDF();

doc.setFontSize(18);
doc.text("Hello World", 10, 10);

doc.setFontStyle('bold');
doc.setFontSize(14);
doc.text("This is bold", 10, 20);

doc.setFontStyle('italic');
doc.setFontSize(14);
doc.text("This is italic", 10, 30);

doc.save('sample.pdf');