Question

我创建了一个简单的表单来查看jspdf如何工作，并且一旦表现出色，就可以扩展表单。

以下是我创建的简单表单：

<form id="smdiv">
    <div id="content">
        <label>Name</label>
        <input type="text" name="name"/>
        <label>Info</label>
        <input type="text" name="info"/>
        <label>ID</label>
        <input type="text" name="id"/>
    </div>
</form>

以下脚本是我通过研究发现的：

<script>
$('#cmd').click(function () {
    var name_val = $('form#smdiv input[name="name"]').val();
    var info_val = $('form#smdiv input[name="info"]').val();
    var id_val = $('form#smdiv input[name="id"]').val();

    var pdf = new jsPDF();
    pdf.text(5, 5, 'You figure out formatting');
    pdf.text(30, 30, 'Name: '+ name_val);
    pdf.text(60, 60, 'Info: '+ info_val);
    pdf.text(90, 90, 'ID: '+ id_val);
    pdf.save('hello_world.pdf');
});

以及我正在调用的以下脚本：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

但是，当我尝试单击按钮生成pdf时，不会生成pdf（下面的参考按钮）。我不确定我做错了什么。我是否调用了错误的jquery脚本来使其工作？任何帮助将不胜感激。

<button id="cmd">generate PDF</button>

这就是我所做的：

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Convert to pdf file</title>

<link rel="stylesheet" href="images/styleregal.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

<script>
    $(document).ready(function(){
        $('#cmd').click(function () {
            var name_val = $('form#smdiv input[name="name"]').val();
            var info_val= $('form#smdiv input[name="info"]').val();
            var id_val = $('form#smdiv input[name="id"]').val();

            var pdf = new jsPDF();
            pdf.text(5, 5, 'You figure out formatting');
            pdf.text(30, 30, 'Name: '+ name_val);
            pdf.text(60, 60, 'Info: '+ info_val);
            pdf.text(90, 90, 'ID: '+ id_val);
            pdf.save('hello_world.pdf');
        }); 
    });
</script>
</head>
<body>

<form id="smdiv">
    <div id="content">
        <label>Name</label>
        <input type="text" name="name"/>
        <label>Info</label>
        <input type="text" name="info"/>
        <label>ID</label>
        <input type="text" name="id"/>
    </div>
</form>
<button id="cmd">generate PDF</button>

</body>
</html>

无法使用jspdf生成pdf

0 个答案: