A HTML to PDF converter button using jspdf

2019-04-01 19:06发布

站内文章 / JavaScript
33 0 0

问题:

The PDF generator button in my html webpage is not working. Can someone please explain where I am going wrong?

I am using jquery version 1.7.2.

<!DOCTYPE html>
<html>
<head>
<title>Print Fax View</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="js/jquery"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>

<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var specialElementHandlers = {
            '#editor': function (element,renderer) {
                return true;
            }
        };
        $('#cmd').click(function () {
            var doc = new jsPDF("p",in,"a4");
            var source = $('#target').html();
            var specialElementHandlers = {
                '#bypassme': function (element, renderer) {
                    return true;
                }
            };
            doc.fromHTML(source, 0.5, 0.5, {
                'width': 7.5,'elementHandlers': specialElementHandlers
            });
            doc.output("dataurlnewwindow");
        });
    });
    </script>
</head>

<body id="target">
         <button id="cmd">generate PDF</button>
         <div> <p>Hello World </p> </div>
</body>
</html>

It is not generating anything. Thanks in advance

回答1:

I am also beginner for html, javascript. Here is the corrected, which is generating pdf.

<!DOCTYPE html>
<html>
<head>
<title>Print Fax View</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.cell.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.ie_below_9_shim.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.javascript.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.PLUGINTEMPLATE.js"></script>
<script type="text/javascript" src="lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var specialElementHandlers = {
            '#editor': function (element,renderer) {
                return true;
            }
        };
        $('#cmd').click(function () {
            var doc = new jsPDF();
            var source = $('#target').html();
            var specialElementHandlers = {
                '#bypassme': function (element, renderer) {
                    return true;
                }
            };
            doc.fromHTML(source, 0.5, 0.5, {
                'width': 75,'elementHandlers': specialElementHandlers
            });
            doc.output("dataurlnewwindow");
        });
    });
</script>
</head>

<body id="target">
         <button id="cmd">generate PDF</button>
         <div> <p>Hello World </p> </div>
</body>
</html>


标签： javascript html5 jspdf
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~