使用 jspdf 将 HTML 和图像转换为 pdf答案

【问题标题】：HTML and image conversion to pdf using jspdf使用 jspdf 将 HTML 和图像转换为 pdf
【发布时间】：2014-08-28 02:03:47
【问题描述】：

目前我在 asp classic、jquery 和 html 中从事一个项目

最近，我使用“from-html.js”成功地将 html 文件转换为 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>

如果你能帮到我，我就放心了，谢谢

【问题讨论】：

标签： html image pdf asp-classic jspdf

【解决方案1】：

将图像编码为base64，并将数据块插入img src区域...即：

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

我知道这是一篇旧帖子，但是我今天一直在处理这个问题，发现 base64 图像是 HTML 到 PDF 转换可以输出它们的唯一方式。

【讨论】：

【解决方案2】：

您必须将表格转换为画布然后显示它。首先将隐藏的画布附加到您的 div。其次将您的 div 复制到隐藏的画布中。第三隐藏您的表格并取消隐藏画布。第四生成 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>

【讨论】：