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

Question 1

我有一个内容div，其ID为“ content”。在内容div中，我有一些图形和一些表。当用户单击下载按钮时，我想以pdf格式下载该div。有没有办法使用javascript或jQuery？

Question 2

您可以使用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');
});

Question 3

里面的内容<div class='html-content'>....</div>可以使用样式下载为pdf文件 jspdf＆html2canvas。

您需要同时引用这两个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画布和jspdf的pdf生成。

也许这会帮助某人。

Question 4

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

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

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

然后按如下所示拦截来自html2pdf生成脚本的数据

   $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;

Question 5

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

Question 6

是的，可以在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屏幕截图机制执行的其他配置和自定义操作，请在此处查看