html2canvasとpdfmakeは空白を作成します

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"); 
      } 
     }); 
    };