你可以使用jsPDF

HTML：

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript：

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

<div class='html-content'>....</div>可以使用jspdf和html2canvas将a 中的内容下载为 pdf 样式。

你需要参考两个js库，

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

然后调用下面的函数，

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

参考：来自 html canvas 和 jspdf 的 pdf 生成。

可能这会帮助某人。

您的解决方案需要一些 ajax 方法将 html 传递到具有 html 到 pdf 工具的后端服务器，然后将生成的 pdf 输出返回到浏览器。

首先设置客户端代码，我们将设置jquery代码为

   var options = {
            "url": "/pdf/generate/convert_to_pdf.php",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

然后从 html2pdf 生成脚本（来自互联网的某个地方）截取数据。
convert_to_pdf.php（在 JQUERY 代码中作为 url 给出）看起来像这样 -

<?php
    $html = $_POST['data'];
    $pdf = html2pdf($html);
    
    header("Content-Type: application/pdf"); //check this is the proper header for pdf
    header("Content-Disposition: attachment; filename='some.pdf';");
    echo $pdf;
?>

AFAIK 没有执行此操作的本机 jquery 函数。最好的选择是在服务器上处理转换。您如何执行此操作取决于您使用的语言（.net、php 等）。您可以将 div 的内容传递给处理转换的函数，该函数将向用户返回 pdf。

是的，可以在 JS 中将 div 捕获为 PDF。您可以查看https://grabz.it提供的解决方案。它们有漂亮而干净的 JavaScript API，可以让您捕获单个 HTML 元素（例如 div 或 span）的内容。

所以，你使用它你将需要app+key和免费的SDK。它的用法如下：

假设您有一个 HTML：

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

要捕获功能 ID 下的内容，您需要：

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

您需要将 替换为http://www.example.com/my-page.html您的目标网址和#feature您的 CSS 选择器。

就这样。现在，当页面加载时，现在将在与脚本标记相同的位置创建一个图像截图，它将包含功能 div 的所有内容，没有其他内容。

您可以对 div-screenshot 机制进行其他配置和自定义，请在此处查看