我的PDF无法生成+图片无法加载

时间:2018-01-29 07:07:57

标签: javascript jquery html jspdf

问题:我不确定为什么当我点击提交按钮时,无法生成PDF。另外,我不确定我的图像是否可以根据下面的代码生成。

$('#button').click(function() {
  //generate PDF
  var imgData = 'data:image/jpeg;base64,/9j/4A....';
  var doc = new jsPDF();

  var expensesType = $('#expensesType').val();

  var remark = $('#remark').val();

  var cost = $('#cost').val();

  doc.setFont("helvetica");

  doc.setTextColor(92, 76, 76);
  //set Expense Type based on the user's choice
  doc.text(60, 51, expensesType);
  //set Remark based on the user's remark
  doc.text(60, 90, remark);
  //set Cost based on the user's cost
  doc.text(60, 144, cost);

  doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

  doc.save('test.pdf');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="navbar"><span>Expenses Form Filling</span></div>
  <div id="wrapper">
    <br> Expenses:
    <br>
    <!dropdown of four options for user to choose what type of expense they are looking for>
    <select name="expensesType" id="expensesType" size="4">
    <option value="bill">Bill</option>
    <option value="operation">Operating</option>
    <option value="drving">Driving</option>
    <option value="rental">Rental</option>
    </select> <br>
    <br>
    <!remark based on the expense type>
    Remark: <br>
    <textarea id="remark" rows="10" cols="20"></textarea><br>
    <br>
    <!cost of the expense>
    Cost($):
    <input type="text" id="cost" value="" placeholder="0.0" />
    <br>
    <!Upon clicking the submit button, it will generate the PDF>
    <input type="button" id="button" value="Submit" />
  </div>

1 个答案:

答案 0 :(得分:0)

一切正常,我在我的本地系统上尝试了这个。你的jspdf库不见了。

请在jquery库之后添加jspdf库。

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

并以double quoits添加base64代码。

 var imgData = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD/";