Question

我正在尝试使用jspdf从HTML表生成pdf。在这种情况下，生成pdf但格式不适合原始格式。这是我的代码。 HTML代码是

<div class="invoice" id="customers">
<table ng-repeat="aim in input" id="example">
    <tr>
        <th class="inv-left"><div align="left"><img src="./images/logo.png" alt=""></div></th>
    <th class="inv-right"><div align="right"><br>
        101 Convention Center<br>
        dr #700, Las Vegas, <br>
        NV - 89019
    </div></th>
    </tr>
    <tr >
        <th><div  cg-busy="{promise:viewPromise}" align="left">          
        <b>Invoiced to</b><br>            
        {{aim.user.username}}<br>
        {{aim.vendor.address}}
    </div></th>
    <th class="inv-right">
    <div align="right"><b>INVOICE</b><br>
        Invoice ID: {{aim.invoiceId}}<br>
        Invoice Date: {{aim.invoiceDate.date| dateFormat | date:'MM-dd-yyyy'}}<br>
        Due Date: {{aim.dueDate.date| dateFormat | date:'MM-dd-yyyy'}}
    </div></th>
    </tr>
    <div class="invoice-content clearfix"  cg-busy="{promise:viewPromise}" >
        <tr>
            <td class="inv-thours">Total Hours</td>
            <td align="center">{{aim.totalHours}}</td>
        </tr>
        <tr>
            <td class="inv-rate">Rate</td>  
            <td align="center">{{aim.billRate}}</td>
        </tr>
        <tr>
            <td class="inv-rate">Amount</td>   
            <td align="center">{{(aim.totalHours) * (aim.billRate)}}</td>
        </tr>
        <tr>                               
            <td class="inv-thours">totalExpenses</td>    
            <td align="center">{{aim.totalExpenses}}</td>     
        </tr>
        <tr>                               
            <td class="inv-thours">Total Amount</td>    
            <td align="center">{{aim.amount}}</td>  
        </tr>
        <tr>
            <td>
            </td>
            <td ng-if="aim.status === 'UNCONFIRMED'">
                <div align="right" style="margin-right:10px;"><input type="submit" value="Confirm"  data-ng-click="confirmStatus(aim)"> | 
                    <button onclick="goBack()">Cancel</button></div>
            </td>
            <td ng-if="aim.status === 'CONFIRMED'">
                <div align="right" style="margin-right:10px;"> 
                    <button onclick="goBack()">BACK</button></div>
            </td>
            <td ng-if="!(aim.status === 'UNCONFIRMED') && !(aim.status === 'CONFIRMED')">
                <button onclick="javascript:demoFromHTML();">PDF</button>
            </td>
        </tr>
</table>

<script type="text/javascript" src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script>
function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    var imgData = '.............';
    pdf.setFontSize(40);
    pdf.addImage(imgData, 'PNG', 12, 30, 130, 40);
    pdf.cellInitialize();
    pdf.setFontSize(10);
    $.each($('#customers tr'), function (i, row) {
        $.each($(row).find("th"), function (j, cell) {
            var txt = $(cell).text();
            var width = (j == 4) ? 300 : 300; //make with column smaller
            pdf.cell(10, 30, width, 70, txt, i);
        });
        $.each($(row).find("td"), function (j, cell) {
            var txt = $(cell).text().trim() || " ";
            var width = (j == 4) ? 200 : 300; //make with column smaller
            pdf.cell(10, 50, width, 30, txt, i);
        });

    });
    pdf.save('sample-file.pdf');
}

我想为这个合成器生成pdf http://i.stack.imgur.com/nrR7l.png 但生成pdf formate是 http://i.stack.imgur.com/DGSxE.png 请帮我解决这个问题。谢谢。

Answer 1

我认为生成的PDF中缺少CSS，并且发现了这个，

github issue link

diegocr于2014年9月25日发表评论

我担心fromHTML插件在支持CSS样式方面有点受限。此外，我们有一个addSVG插件来处理SVG元素，但fromHTML不使用它。所以，不，问题不是Angular，你可以使用新的addHTML（＃270），但我不知道如果这将处理SVG。（html2canvas，即）

使用angularjs中的jspdf从html页面生成pdf

1 个答案: