使用javascript将HTML页面中的div下载为pdf

我有一个id为“content”的content div。在content div中，我有一些图表。当用户单击下载按钮时，我想将该div下载为pdf格式。有没有一种方法可以使用javascript或jQuery实现这一点？

您的解决方案需要一些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。
您可以使用

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>

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');
});

是的，可以在JS中将div捕获为PDF。您可以检查提供的解决方案。它们有漂亮干净的JavaScript API，允许您捕获单个HTML元素（如div或span）的内容

所以，你使用它，你将需要和免费的。其用途如下：

假设您有一个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>


顶点照相机
价格399美元

5分之4.5
这是一个巨大的失败。时间自由，前庭自由。Nam ut velit eget
在ac直径下的三体斜肌。这是一种新鲜的酒，是一种美的酒，是一种清淡的酒。罗汉果
布兰迪特。在hac habitasse Plateum，一句名言。潜力悬钩子。飞虱


要捕获功能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>

//添加sdk
//使用您的密钥和密码登录。
GrabzIt（“KEY”、“SECRET”）.ConvertURL（“http://www.example.com/my-page.html",
{“target”：“#features”，“format”：“pdf”}）.Create（）；

您需要更换
http://www.example.com/my-page.html
使用您的目标url和每个CSS选择器的
#功能

就这些。现在，加载页面时，将在与脚本标记相同的位置创建一个图像屏幕截图，其中将包含features div的所有内容，而不包含其他内容

这些是您可以对div屏幕截图机制进行的其他配置和定制，请查看中的
内容。
可以使用jspdf和html2canvas以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创建PDf。。。
函数CreatePDFfromHTML（）{
var HTML_Width=$（“.HTML内容”）.Width（）；
var HTML_Height=$（“.HTML内容”）.Height（）；
var上下边缘=15；
var PDF_Width=HTML_Width+（左上角距*2）；
变量PDF_高度=（PDF_宽度*1.5）+（左上角距*2）；
var canvas_image_width=HTML_width；
var canvas_image_height=HTML_height；
var totalPDFPages=Math.ceil（HTML\u Height/PDF\u Height）-1；
html2canvas（$（“.html内容”）[0]）。然后（函数（画布）{
var imgData=canvas.toDataURL（“image/jpeg”，1.0）；
var pdf=新的jsPDF（'p'，'pt'，[pdf_宽度，pdf_高度]）；
pdf.addImage（imgData，'JPG'，左上角，左上角，画布图像宽度，画布图像高度）；
对于（var i=1；我是我所知道的能够做到这一点的最好的库。我如何使用jsPDF下载特定div中的内容？从我在他们网站的示例中看到，这是无法做到的。你所说的“拥有htmltopdf工具”是什么意思？引用同一个url可以吗？还是我应该更改它？您需要一个稍微不同的url，以便能够区分这两个内容该url是什么？您能举个例子吗？如果CSS链接，您会被搞砸的，因为后端程序不知道在哪里找到样式，除非它能够抓取CSS文件并应用文件中的样式。我这里有一个问题。我在这里添加的css没有被应用到pdf文件中。我也有一些图形。那些r没有出现在pdf中。我应该怎么做才能得到它们？jsPDF也没有正确格式化表，它只是将td/th解释为display:block；使用上面的代码，我们可以在上面创建pdf只有一次。但是第二次它不起作用了。为了让它起作用，请@kristof feys检查一下，我们需要在click函数中声明
doc
变量。这很好，只是可惜css没有被呈现出来：/I面临编码问题，我想你只能得到1000个免费捕获和100个免费“抓取”使用grabz.it。因此，除非您愿意付费，否则这不是一个永久性的解决方案。这对我来说非常有效，谢谢。它保留了所有样式，但也有一些限制（将PDF创建为图像，因此无法搜索；似乎也有点模糊）。如果一半的内容无法放在一个页面上，如何设置分页符？对我来说效果很好。唯一的问题是我的一些SVG图标没有呈现！为此我欠你几杯啤酒。干杯！：）