Question

大家好，这是我的第一个jsPDF项目，我必须打印一个完整的HTML5页面，其中包含所有CSS样式，如表背景图像和页面CSS中设置的填充。

我已浏览过很多网站，但找不到正确的解决方案请帮忙。我可以成功生成没有背景图像的表格，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" media="print, screen" href="print.css">

    <title>JS to pdf check</title>
<!--  -->
<style>

</style>

</head>

<body style="backgorund : url(js/1234.PNG);">
    <div class="panel-body panel-body-table">
                                    <table id="customers" class="table table-striped">
                                        <thead>         
                                            <tr>
                                                <th>Country</th>
                                                <th>Population</th>
                                                <th>Date</th>
                                                <th>%ge</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Chinna</td>
                                                <td>1,363,480,000</td>
                                                <td>March 24, 2014</td>
                                                <td>19.1</td>
                                            </tr>
                                            <tr>
                                                <td>India</td>
                                                <td>1,241,900,000</td>
                                                <td>March 24, 2014</td>
                                                <td>17.4</td>
                                            </tr>
                                            <tr>
                                                <td>United States</td>
                                                <td>317,746,000</td>
                                                <td>March 24, 2014</td>
                                                <td>4.44</td>
                                            </tr>
                                            <tr>
                                                <td>Indonesia</td>
                                                <td>249,866,000</td>
                                                <td>July 1, 2013</td>
                                                <td>3.49</td>
                                            </tr>
                                            <tr>
                                                <td>Brazil</td>
                                                <td>201,032,714</td>
                                                <td>July 1, 2013</td>
                                                <td>2.81</td>
                                            </tr>
                                        </tbody>
                                    </table>                                    

                                </div>
                            </div>

<!-- <button href="#" onClick ="$('#customers').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});">PDF</button>-->
 <button href="#" onClick ="print();">PDF</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="js/tableexport.js"></script>
    <script src="js/jquery.base64.js"></script>


    <script src="js/sprintf.min.js"></script>
     <script src="js/jspdf.min.js"></script>
    <script src="js/base64.js"></script>
    <script src="js/plugins/from_html.js"></script>
    <script src="js/plugins/split_text_to_size.js"></script>
    <script src="js/plugins/standard_fonts_metrics.js"></script>
    <script src="js/plugins/addimage.js"></script>

<script>
    function print() 
    {
var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });
//  doc.addImage(src, 'PNG', 10, 20, 280, 150);
doc.output("dataurlnewwindow");
        }
</script>
</body>
</html>

如何在body标签中打印背景图像？

使用带有背景图像的HTML5页面中的jsPDF生成PDF

0 个答案: