HTML和使用jspdf

目前我在ASP經典，jQuery的一個項目工作，圖像轉換爲PDF和htmlHTML和使用jspdf

最近，我成功地一個html文件轉換爲使用「從-html.js」的PDF版本，但我有一個問題是：

我如何插入一些圖片在我創建的PDF？我搜索了很長一段時間，我沒有找到辦法。

我試圖使用addhtml.js或addimage.js與我的實際代碼混合，但它不起作用。有什麼我已經做了目前

<title>Recapitulatif Commande</title> 

<script type="text/javascript" src="./examples/js/jquery/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jspdf.js"></script> 
<script type="text/javascript" src="./dist/jspdf.min.js"></script> 
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script> 
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> 
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script> 
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script> 
<script src='./libs/Blob.js/Blob.js' type='text/javascript'></script> 
<script src='./libs/FileSaver.js/FileSaver.js' type='text/javascript'></script> 
<script src='./libs/png_support/zlib.js' type='text/javascript'></script> 
<script src='./libs/png_support/png.js' type='text/javascript'></script> 
<script src='./libs/deflate.js' type='text/javascript'></script> 
<script src='jspdf.plugin.png_support.js' type='text/javascript'></script> 

<script language="JavaScript"> 

    $(document).ready(function(){ 

    var doc = new jsPDF();  

    var specialElementHandlers = 
    { 
     '#editor': function (element, renderer) 
     { 
      return true; 
     } 
    };  

    $('#cmd').click(function() 
    { 
     doc.fromHTML($('#mydiv').html(), 15, 15, { 
      'width': 170, 
      'elementHandlers': specialElementHandlers,   
     }); 
     doc.save('RecapCommande.pdf'); 
    }); 
}); 
</script> 

<div id="mydiv"> 
    <h2><center>Bonjour voici un recap des notes</center></h2> 
    <table id="table" width="100%" border="2px solid"> 
     <thead> 
      <tr> 
       <th width="33%" align="center">date : </th> 
       <th width="33%" align="center">montant : </th> 
       <th width="33%" align="center">statut : </th> 
      </tr> 
     </thead> 
    </table>   
</div> <!-- /container --> 
<table id="table14" width="100%" > 
     <thead> 
      <tr> 
       <th width="33%" align="center"><button id="cmd" align="center" >Imprimer votre commande</button></th> 
      </tr> 
     </thead> 
</table>

如果你能幫助我，我會因此緩解，感謝

來源

2014-07-07 RFlight

，你將有你的表格轉換成畫布，然後顯示it.First附上一個隱藏的畫布第二次將你的div複製到隱藏的畫布上。第三個隱藏你的表並取消隱藏canvas.fourth生成pdf。

<Script> 
//first 
$("#table").append('<div id="can" style="background-color:white" > 
<canvas id="canvas" width="300" height="320" style="background-color:white"></canvas> </div>'); 
//second 
canvg('canvas', $("#table").html()); 
//third 
var im = document.getElementById('canvas'); 
     im.style.display = 'block'; 
var create = document.getElementById('table'); 
     create.style.display = 'none'; 
//fourth..call function for pdf generation 


</Script>

來源

2014-08-08 18:14:37

編碼您的圖片爲Base64，然後將數據blob到IMG SRC領域...即：

<img src="data:image/jpeg;base64,/9j/4AA......9k=" />

我知道這是舊的文章，但我一直在處理這個問題今天發現，base64圖像是HTML到PDF轉換可以輸出它們的唯一方式。

來源

2016-04-07 05:20:21

HTML和使用jspdf

回答

相關問題