html2canvas 和 pdfmake 创建空白 pdf

Question

我正在尝试使用 html2canvas 和 pdfMake 从 html div 生成 pdf，但总是得到一个空白页或只是 div 的一部分！如何获取整个 div 内容？

这里是js代码：

$scope.PrintFiche = function () {
    var prom = new Promise(function (resolve, reject) {
        html2canvas(document.getElementById('DevisImpression'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL("image/png");
                var docDefinition = {
                    content: [{
                        image: data
                    }]
                };
                resolve(docDefinition);
            }
        });
    })

    prom.then(function (docDef) {

        pdfMake.createPdf(docDef).download($scope.FicheName + ".pdf");
    })

}

还有html：

<div class="Partie" id="DevisImpression">
        <div id="PartieInner">
            <h2 id="TitreDevis">
                <b>
                    Etablissement du devis
                </b>
            </h2>
            <div id="ImgVoitureDevis">
                <img id="ImgVoitureAdapt" src="../../Assets/Images/test.jpg" />
            </div>
            <div id="OptMult">
                <table id="TableDevis">
                    <tr>
                        <td class="td1">
                            Modèle :
                        </td>
                        <td class="td2">
                            {{modele.displayName}}
                        </td>
                    </tr>
                    <tr>
                        <td class="td1">
                            Classe :
                        </td>
                        <td class="td2">
                            {{classe.displayName}}
                        </td>
                    </tr>
                    <tr>
                        <td class="td1">
                            Moteur :
                        </td>
                        <td class="td2">
                            {{moteur.displayName}}
                        </td>
                    </tr>
                    <tr>
                        <td class="td1">
                            Couleur :
                        </td>
                        <td class="td2">
                            {{couleur.displayName}}
                        </td>
                    </tr>
                    <tr>
                        <td class="td1">
                            Jantes :
                        </td>
                        <td class="td2">
                            {{jante.displayName}}
                        </td>
                    </tr>
                </table>
            </div>
            <table id="Devis">
                <tr>
                    <th class="tdDevis2">
                        Options
                    </th>
                    <th class="tdDevis2">
                        Prix
                    </th>
                </tr>
                <tr ng-repeat="optionDev in optionsDevis">
                    <td class="td3">
                        {{optionDev.displayName}}
                    </td>
                    <td class="td4">
                        {{optionDev.prix}} €
                    </td>
                </tr>
            </table>
        </div>
        <h2 id="TotalTitre">
            <b>
                TOTAL
            </b>
        </h2>
        <input type="text" id="Total" value="{{total}} €" disabled />
        <br />
    </div>

Answer 1

我有一个简单的解决方案。试试这个。

$scope.downloadQuotation = function () {
        html2canvas(document.getElementById('rosterPrintView'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500
                    }]
                };
                pdfMake.createPdf(docDefinition).download("Roster.pdf");
            }
        });
    };