使用 JSPdf 生成将整个 html 页面导出为 pdf答案

【问题标题】：Export whole html page to pdf using JSPdf generation使用 JSPdf 生成将整个 html 页面导出为 pdf
【发布时间】：2014-06-25 17:48:40
【问题描述】：

我已经将这些 js 文件添加到我的 aspx 页面。但我仍然无法获取我的表格数据的 pdf 文件。生成的 pdf 是空白的。我需要生成的 pdf 的所有表格数据。如果有人知道该怎么做吗？

 <script src="../Script/jspdf.js"></script>
        <script src="../Script/FileSaver.js"></script>
        <script src="../Script/Blob.js"></script>
        <script src="../Script/BlobBuilder.js"></script>
        <script src="../Script/deflate.js"></script>
        <script src="../Script/adler32cs.js"></script>
        <script src="../Script/jspdf.plugin.addhtml.js"></script>
        <script src="../Script/jspdf.plugin.from_html.js"></script>
        <script src="../Script/jspdf.plugin.split_text_to_size.js"></script>
        <script src="../Script/jspdf.plugin.standard_fonts_metrics.js"></script>
        <script src="../Script/base64.js"></script>
        <script src="../Script/sprintf.js"></script>

//这是我的aspx表或div内容：

<div id="divReport" style="display: none">

            <input type="button" id="btnSavePdf" value="Save as Pdf" />
                   <table id="example">
                <tr id="trProject">
                    <td><span>Project :</span></td>
                    <td><span id="spanProject" runat="server"></span></td>
                </tr>
                 <tr>
                    <td><span>Total Number of Employee :</span></td>
                    <td>
                    <asp:Label ID="spanTotalEmp" runat="server" EnableViewState="false"  ClientIDMode="Static" ></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td><span>Total Number of Hours :</span></td>
                    <td>

                         <asp:Label ID="spanTotalHours" runat="server" name="_name2" EnableViewState="false"  ClientIDMode="Static" ></asp:Label>

                    </td>
                </tr>
            </table>
</div>

// 下面是我的 Javascript 按钮 onclick 代码：

$('#btnSavePdf').click(function () {

            var doc = new jsPDF('p', 'in', 'letter');
            var source = $('#divReport').html();
            var specialElementHandlers = {
                '#bypassme': function (element, renderer) {
                    return true;
                }
            };

            doc.fromHTML(
                source, // HTML string or DOM elem ref.
                0.5,    // x coord
                0.5,    // y coord
                {
                    'width': 7.5, // max width of content on PDF
                    'elementHandlers': specialElementHandlers
                });

            doc.output('dataurl');

【问题讨论】：

您要渲染整个 html 页面（如标题所示）还是只渲染表格（如您的问题所示）？

标签： javascript jquery ajax pdf jspdf

【解决方案1】：

我假设您只想呈现表格而不是整个页面。您可以使用HTML table export jQuery plugin 执行此操作。这就是您的 HTML 的样子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- jQuery 2.0.2 -->
    <script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

    <script type="application/javascript" src="tableExport.js"></script>
    <script type="application/javascript" src="jquery.base64.js"></script>
    <script type="application/javascript" src="jspdf/libs/sprintf.js"></script>
    <script type="application/javascript" src="jspdf/jspdf.js"></script>
    <script type="application/javascript" src="jspdf/libs/base64.js"></script>
</head>

<body>
<table id="example">
   <!-- rows here -->
</table>    
<a href="#" onclick ="$('#example').tableExport({type:'pdf',escape:'false'});">As PDF</a>
</body>
</html>

【讨论】：

谢谢哥们！！！它正在工作，但你能告诉我如何调整或自定义表格布局，因为生成的 pdf 会覆盖表格的列。
@vivek 你有没有找到重新调整大小或自定义表格布局的解决方案我已经应用了上面的代码，但它的格式不是很好的空格
@MohammadFaizankhan 我如何在打印的表格 pdf 中添加边框。请看问题stackoverflow.com/questions/31469939/…
@Frank Rem - 我想如何获取整个 HTML 内容。我只能保存可见的内容

【解决方案2】：

style="display:none" 会阻止它呈现，因此您会得到一个空白页面。

也就是说，我认为您使用的是相当旧的模板，因为 sprintf.js 和 base64.js 在三年前已被删除。您应该只需要包含dist 文件夹中可用的文件之一。

https://github.com/MrRio/jsPDF/tree/master/dist

这里有一个使用最新版本的 fromHTML 表格示例：http://jsfiddle.net/dGLmr/7/

【讨论】：