Angular js中的HTML到Pdf转换答案

【问题标题】：Html To Pdf conversion in angular jsAngular js中的HTML到Pdf转换
【发布时间】：2017-04-18 05:48:15
【问题描述】：

我正在尝试将 html 转换为 pdf。是否有任何自定义指令，我可以使用。我也尝试使用 npm 站点的 angular-save-html-to-pdf，但使用时出现一些错误。有没有其他方法可以在angular js中将html转换为css。

【问题讨论】：

标签： html css angularjs pdf html2pdf

【解决方案1】：

有支持此功能的 jsPDF 库。它使用 html2canvas。他们的网站上有一个demo。

var doc = new jsPDF();

// We'll make our own renderer to skip this editor
var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
});

【讨论】：

【解决方案2】：

您可以将 PdfMake 与 angularjs 一起使用。

我已经用 pdfmake 制作了一个示例。

var docDefinition = {
      content: [
        {
          text: 'Criketers and scores'
        },
        {
          style: 'demoTable',
          table: {
            widths: ['*', '*', '*'],
            body: [
              [{text: 'Name', style: 'header'}, {text: 'Matches', style: 'header'},
                {text: 'Score', style: 'header'}
              ],
              ['Sachin', '344', '52'],
              ['Sanga', '320', '89'],
              ['Ponting', '300', '68'] 
            ]
          }
        }
      ],
      styles: {
        header: {
          bold: true,
          color: '#000',
          fontSize: 11
        },
        demoTable: {
          color: '#666',
          fontSize: 10
        }
      }
    };

    $scope.openPdf = function() {
      pdfMake.createPdf(docDefinition).open();
    };

    $scope.downloadPdf = function() {
      pdfMake.createPdf(docDefinition).download();
    };

DEMO

【讨论】：