Javascript 使用Angular 4、jsPDF、html2canvas从HTML/CSS字符串生成PDF_Javascript_Html_Css_Angular_Pdf

Javascript 使用Angular 4、jsPDF、html2canvas从HTML/CSS字符串生成PDF

javascript html css angular pdf

Javascript 使用Angular 4、jsPDF、html2canvas从HTML/CSS字符串生成PDF,javascript,html,css,angular,pdf,Javascript,Html,Css,Angular,Pdf,我正在尝试用css生成pdf，但没有多大成功。我有一个包含html和内嵌css的字符串，但是当我使用jsPDF时，生成的PDF不包括样式。我读到为了包含样式，我还应该使用html2canvas，然后用jsPDF添加一个图像。然而，这些都不适合我这是我的密码： @Component({ selector: 'app-pdf-generator', templateUrl: './pdf-generator.component.html', styleUrls: ['./pdf-gen

我正在尝试用css生成pdf，但没有多大成功。我有一个包含html和内嵌css的字符串，但是当我使用jsPDF时，生成的PDF不包括样式。我读到为了包含样式，我还应该使用html2canvas，然后用jsPDF添加一个图像。然而，这些都不适合我

这是我的密码：

@Component({
  selector: 'app-pdf-generator',
  templateUrl: './pdf-generator.component.html',
  styleUrls: ['./pdf-generator.component.css'],      
  host: { '[@routeAnimation]': 'true', 'style' : 'display:block;' }

  onSubmit()
  {
     let servers = this.serversService.getServers();
     var rows = this.buildServerListByOptions(servers)
     var htmlText = this.buildPdfText(rows); //the final html string I want to render on a PDF file.


     //Here I need to genereate a DOM element, create an image of it using html2canvas, and then save as PDF. I **don't** want the element to appear on the page though, only in the PDF file.

     // doc.addImage(canvas, 0,0,100,100);
     // doc.save('report.pdf')

尽管阅读了所有我能在网上找到的东西，我仍然不能使用html2canvas库。我希望有一个与我的示例相关的代码示例（动态创建DOM元素、创建DOM元素的图像、添加到PDF中），或者使用angular生成支持CSS的PDF的另一种方法

谢谢

以下是生成pdf供您参考的示例。。但在这里，我还没有使用html2canvas进行造型。希望它能帮助您：

在HTML中：

<a class="page-link" style="  (click)="convert()">Generate PDF</a>

并使用以下功能：

convert() {

    var doc = new jsPDF();
    var col = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];

    var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAUAAAABAAAASgMDAAEAAAABAAAAAFEQAAEAAAABAQAAAFERAAQAAAABAAAOw1ESAAQAAAABAAAOwwAAAAAAAYagAACxj//bAEMABwUFBgUEBwYFBggHBwgKEQsKCQkKFQ8QDBEYFRoZGBUYFxseJyEbHSUdFxgiLiIlKCkrLCsaIC8zLyoyJyorKv/bAEMBBwgICgkKFAsLFCocGBwqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKv/AABEIAPwBwAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APpGiiqWo6lFp8G+QFnP3UHU0AOuILiYlUuWt19Y1BY/iQQPyrN/4R+6Egki17Ucg52yeWyn/wAcB/Wse48S6jLIRFvGOsdrbtKw+uAf6Vlar40vtFSNroXkJlyIzcW7KGIBJHK4zgE4p2I5kbN8/izTZg8axX9tnmS3BDr9Y2JyPdWz7VoW3iiBWjh1XZayyY2sThWP49PxrmfD3xUivrwW2q2jQIxwt2g+Qf7w6j69PpVn4leGX1jR/wC0bBibi1+Z7cNgXMfdR6P3U9+h4PBa24r9YnX3Oq2dndw291OsMlxxFv4DH0B6Z9utXQcivP8AwbdLfaPFo+r/AOnWVxEDavOuSVxnYc85A5HcYI7CprnU7vwLfxxalLJdaFO22K4c7pLU/wB1j3GOh64HqOdYUlUXLHft39BOpbV7HeUVHFKksavGwdGGVZTkEetSViahRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAJ0rgbS4m8VeM761yyWGnkLMw43t2QH8Dk+3vXesMqR7VzXg0WzxancWuD516zMR1ztUEfgQaZMtWjo4YY4IljiRURRgKowBXIfEbw++uadZSW0sS3NhceckUzhVnQqVdMnocHIPqBVjx94wtfBugLd3c6QNPKIkdhnbwWZsd8AHA7nA7188eKPj9dTs6eHoGVPu/arj5nP4dB+OaEhSfQ9gg0CK2EQMXMg+RQuWb2wKr69qz+E9QhTxJK0di9jH9kc5ZFdGffHxn5trIfcA+leVfBP4oeIJ/ifbaXqd3Jd2erFkeNjxG4UsHUdumDjqD7V9PatpGna7pz2Or2cV5bSctHKuRnsR6Eeo5FNkxhoeIw/FrQb7WbGz0q6kuLqW6iWFI4H+Zt4wORXteu6TDrmh3VhOBiZCFbH3G6qw+hwa8Jm1nwf4F8ZTT+EvDME89u7Rm8up3Zg2cMEznHTG4816x4V+Imk+J9IuLwN9kks033MMrD92P7wPdeDzXoTwGLowjiHBpaWf5GUatJtwuYnwm8QvLHd+HbxiZtPO6EHqIycFP8AgLcfQj0r0vtXz78MNUOp/GWe4tARFOlw746BTz/PbX0HWmcUFQxVkrXSbXm9x4aTlTFoooryTpCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArz7w7YX/AIV+JmraYYJJdG1oHULSZQSsE2f3sbegJO4fXFeg0YoA8B/amSV9E0TYrFS04OOmf3Z/kGrn/gp8NNJ8a/DXWItXje3u5L8KsyqCyoEUrwwPctzwfevc/Hvhi18S6ND9rXJsJvtK8ZyNrKy/irH9K4T4a+JLTT/Fj6QPLjgv4wsRQ/KZFyVx/vKW/IU+hDl71hdO+Geg/B+xl16wD6hqskkdtDc3S/LB5jhCVUdOD1z7cA1STxNf2Vw1wNavpZ2OSZJiUz/ufdx7Yr1rxNoUPiTw5d6XOxjE6ApIvWN1IZGH0YA/hXz9/Yt7NrV5p91m3u7R9s9uRyuejD1RuoP4dQaqNiKl+hm614f1LVVvNa0u1aa2a5czC3Qt5Eh+dgVGSFO7IPIGcHpk8/YaTrF7cNbafb3E0kw2NHDk7hnOCB2yBX0d8MbCy0nRZbYSkX1xL5s0UnBGBgbfUYGcj1rufLUdAB+FfTYbiSvQo+xcFK2zOWWDhUfPex5z8Jvh5J4QsZr/AFUL/ad2oUoDkQpnO3PqTyfoPSvQ1nDXUkP8SKrH6HP+BqU4A54FULTEuqXc6nK7UiB9xkn/ANCFfPYnEVMTVlWqu7Z2QgqcVGJo0UUVzmgUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFADSNwweleD+LPh6fC/ig6haJJ/YdzN5sU0RO7TZi27Bx/wAsy3II+6eOle80ySNZY2SRQysMFWGQRRsKSujC8Oa497axW2pFUvQv3x92cf3l/qO30qDxR4MsvEjxXYlksdVtgRbahABvQf3WB4dD3U8fQ81S1fwlqVswn8KXNuqA5fTb0Ewt/uOvzRn6ZHtVWPxZ4j0tgmreGr5lHUxr54H0eMHP/AlB96ZN7aSEij1PSUEXiTRzdIh4vdNQyI3+0Y/vofpu+tXE8UWO4Q2N/MZD0jcnd+TjIq5p3jOLU544U0TWYXcgZlsiqr9WzwK6baPSgSj2ZzKw61qBH3oI26vI3Qeyit+ztY7O2WGLlV7nqx7k+9WKWkWlYKKKKBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAIQT0OKheOY/dkqeigCg9ven7ki/iTTFtb/PMif99H/CtKigVipHBcD78g/A1YRXH3mzT6KBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k='




var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]


rowCountModNew.forEach(element => {
      rows.push(element);

    });



    doc.addImage(imgData, 'JPEG', 90, 60, 20, 20);


    doc.autoTable(col, rows);
    doc.save('Test.pdf');
  }

要在表格前后添加文本，请执行以下操作：

convert() {       
    var doc = new jsPDF();
    var col = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];    
    var imgData = 'data:image/jpeg;base64,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H3mzT6KBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k='   


var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]

rowCountModNew.forEach(element => {
      rows.push(element);          
    });

    doc.text(80, 20, 'Report Final');
    doc.addImage(imgData, 'JPEG', 90, 40, 20, 20);    
    doc.autoTable(col, rows,{startY: 60});
    doc.text(80, 130, 'Thank you');
    doc.save('Test.pdf');        
  }

它看起来是这样的：

谢谢，但是无法让autotable工作，收到了奇怪的错误消息。好的。你能把错误消息放进去吗？还有一个问题..您是否运行了这个命令：npm install jspdf autotable--saveWell，我可以安装它，但是当我尝试运行它时，我得到：doc.autotable不是Pdf-generator.component.tsI上的一个函数。我查找了这个错误，我看到一些人通过使用require而不是import来修复它，但这并不能解决我的问题。仍然有同样的错误。在即兴演奏变奏曲之后，它终于开始工作了。不过我还有一个问题。使用自动表格后，是否可以在保存前向pdf添加更多文本？我尝试了doc.fromHTML，但它忽略了表，因此两者冲突。我希望文本显示在表的上方和下方。可能吗？

convert() {       
    var doc = new jsPDF();
    var col = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];    
    var imgData = 'data:image/jpeg;base64,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H3mzT6KBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k='   


var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]

rowCountModNew.forEach(element => {
      rows.push(element);          
    });

    doc.text(80, 20, 'Report Final');
    doc.addImage(imgData, 'JPEG', 90, 40, 20, 20);    
    doc.autoTable(col, rows,{startY: 60});
    doc.text(80, 130, 'Thank you');
    doc.save('Test.pdf');        
  }