Question

我有一个id为“content”的内容div。在内容div中我有一些图表和一些表格。我想在用户点击下载按钮时将该div下载为pdf。有没有办法用javascript或jQuery做到这一点？

Answer 1

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

Answer 2

<div class='html-content'>....</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();
    });
}

参考：pdf genration from html canvas and jspdf。

也许这会帮助某人。

Answer 3

您的解决方案需要一些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;

Answer 4

jQuery中没有这样的机制，但你可以使用像这样的插件 http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

同时查看此帖子 Is it possible to generate PDF using jQuery?

Answer 5

AFAIK没有本地jquery功能可以做到这一点。最好的选择是在服务器上处理转换。你如何做到这取决于你使用的语言（.net，php等）。您可以将div的内容传递给处理转换的函数，该函数会将pdf返回给用户。

Answer 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-screenshot机制进行其他配置和自定义，请查看here

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

6 个答案: