Question

我正在使用jsPDF将div创建为PDF。我已下载jsPdf library并在index.php中编写了以下代码。

不幸的是，点击按钮cmd不会创建PDF。我的JS有什么问题吗？

非常感谢。

<!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" />
<title>Untitled Document</title>
</head>
<script>

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


<body>
<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

</body>
</html>

Answer 1

我已导入jsPdf.debug.js this is the file，然后使用以下代码。这样可以正常工作。

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Save the particular div as pdf format</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    </head>

    <body>

    <div id="content"  align="center">
    <h3>div</h3>
    <p>paragraph</p>
    </div>


    <div id="posts-landing"  align="center">
    ------------------------------------------------------------------------------------------
    <h3> download 2</h3>
    <p>    download 2 paragraph</p>
    ------------------------------------------------------------------------------------------
    </div>
    <br>
    <div align="center">
    <button id="download">Download</button>
    </div>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type='text/javascript' src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
    <script>
    $(document).ready(function() {
    $('#download').click(function () {
    var pdf = new jsPDF('p', 'pt', 'letter')
    , source = $('#posts-landing')[0]
    , specialElementHandlers = {
        '#bypassme': function(element, renderer){      
            return true
        }
    }

    margins = {
        top: 60,
        bottom: 60,
        left: 40,
        width: 522
      };

    pdf.fromHTML(
        source 
        , margins.left 
        , margins.top 
        , {
            'width': margins.width 
            , 'elementHandlers': specialElementHandlers
        },
        function (dispose) {

            pdf.save('Downloaded.pdf');
          },
        margins
      )
    });
        });
    </script>
    </body>

</html>

Answer 2

我尝试导入以下文件以获取jspdf功能。

jquery.min.js (try use latest version if you have)
jspdf/jspdf.js
jspdf/jspdf.plugin.standard_fonts_metrics.js
jspdf/jspdf.plugin.split_text_to_size.js
jspdf/jspdf.plugin.from_html.js
jsPDF/dist/jspdf.debug.js

代码，

var doc = new jsPDF('p', 'pt');
//OR
//var doc = new jsPDF();

// We'll make our own renderer to skip this editor
var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

doc.fromHTML($('#render_me').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
});
//doc.save('Test.pdf');

below is html code
<div id="render_me">
<div id="table">
<table id="StudentInfoListTable">
                <thead>
                    <tr>    
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td>Dani</td>
                        </tr>               
                </tbody>
            </table>
  </div>
  <a href="#">Download Test PDF</a>

使用jsPdf

2 个答案: