Gardez les styles d'un « exporté au format PDF » table html

Sur mon projet MVC Je le tableau html suivant:Gardez les styles d'un « exporté au format PDF » table html

<div id="tableToPrint"> 
    <table border="0" id="tbl" cellspacing="25"> 
     <tr class="te"> 
      <th align="left">DATE</th> 
      <th align="left">METHOD</th> 
      <th align="left">DEPOSIT</th> 
      <th align="left">WITHDRAWAL</th> 
     </tr> 
     <!-- ko foreach: accountInfo --> 
     <tr> 
      <td valign="top"><span data-bind="text: moment(new Date(orderDate())).format('MM/DD/YYYY')"></span></td> 
      <td valign="top"><span data-bind="text: type"></span> </td> 
      <td class="deposit" valign="top"><span data-bind="text: $root.formatCurrency(deposit())" id="deposit"></span></td> 
      <td valign="top"><span data-bind="text: $root.formatCurrency(withdrawal())"></span> </td> 
     </tr> 
     <!-- /ko --> 
     <tr class="last"> 
      <td valign="top">&nbsp;</td> 
      <td valign="top">&nbsp;</td> 
      <td valign="top"><span data-bind="text: $root.totalDeposit()"></span></td> 
      <td valign="top"><span data-bind="text: $root.totalWithdrawal()"></span></td> 
     </tr> 
    </table> 
</div>

j'ai un bouton « Exporter au format PDF » qui fonctionne correctement, mais perd la conception , il est exporté sans tous les styles.

C'est mt code javascript qui exporte la table en PDF en utilisant la bibliothèque jspdf:

self.exportToPdf = function() { 
    var newPdf = new jsPDF(); 
    var specialElementHandlers = { 
     '#tableToPrint': function (element, renderer) { 
      return true; 
     } 
    }; 
    // newPdf.setFontSize(16); 
    var html = $("#tableToPrint").html(); 
    var margins = { 
     top: 80, 
     bottom: 60, 
     left: 40, 
     width: 522 
    }; 
    newPdf.fromHTML(
     html, // HTML string or DOM elem ref. 
     margins.left, // x coord 
     margins.top, { // y coord 
      'width': margins.width, // max width of content on PDF 
      'elementHandlers': specialElementHandlers 
     }); 
    newPdf.save("YourTable.pdf"); 
}

est-il de toute façon de garder la conception originale de la table dans le pdf exporté? Ou au moins de le concevoir via le code javascript qui exportent le tableau en pdf? Merci d'avance.

Source

2016-09-21 user3378165

Je ne sais pas quels paramètres doit être fait à votre plugin 'JsPdf' parce que je ne vois pas la documentation de celui-ci. Mais des raisons évidentes avec peu de plugins là-bas, ils exigent tous les 'styles à donner en ligne 'plutôt que de classe. Certains plugins prennent un instantané de l'écran et en font un PDF qui n'aura pas de problème avec les styles –

@ user3378165 Avoir le même problème. Pourriez-vous me dire svp, comme je comprends de la réponse ci-dessous il n'y a aucun moyen d'exporter la conception de la table html automatiquement? Sans les paramètres de style js. Par exemple si je ne sais pas exactement quel sera le design dans la table html mais je veux l'exporter en pdf? – RoGGeR

@RoGGeR Je n'étais pas capable de comprendre comment exporter la table avec le design original, a dû la concevoir par moi-même. – user3378165

qui a résolu mon problème:

self.exportToPdf = function() { 
    var pdf = new jsPDF('p', 'pt', 'letter'); 
    source = $('#tableToPrint')[0]; 
    specialElementHandlers = { 
     '#bypassme': function (element, renderer) { 
      return true 
     } 
    }; 
    margins = { 
     top: 80, 
     bottom: 60, 
     left: 40, 
     width: 522 
    }; 
    pdf.fromHTML(
     source, // HTML string or DOM elem ref. 
     margins.left, // x coord 
     margins.top, { // y coord 
      'width': margins.width, // max width of content on PDF 
      'elementHandlers': specialElementHandlers 
     }, 
    function (dispose) { 
     // dispose: object with X, Y of the last line add to the PDF 
     //   this allow the insertion of new lines after html 
     pdf.save('YourTable.pdf'); 
    }, margins 
    ); 
}

Source

2016-11-04 06:02:21 user3378165

Gardez les styles d'un « exporté au format PDF » table html

Répondre

Questions connexes