时间戳

首页 > 解决方案 > 无法使用 jsPDF 正确格式化我的 PDF

angular - 无法使用 jsPDF 正确格式化我的 PDF

问题描述

我尝试将我的数据导出为 PDF 格式，但下载此文件时无法在我的 PDF 上获得正确的格式。

如果我只有 2,3 个字段，那么它会正确显示，但如果我有超过 5,6 个字段，那么我的 PDF 文件显示如下。

在此处输入图像描述

如何解决这个问题。

有什么简单的方法可以将我的数据导出为 PDF 格式。

这是我的 listuser.component.html

<div class="container" id="content" #content>                          
     <table class="table table-striped">
       <thead>
          <th>Id</th>
          <th>User Name</th>
          <th>type</th>
          <th>Model Name</th>
          <th>Year</th>
      </thead>
        <tbody *ngIf="isTableResult ; else noTableResults">         
           <tr *ngFor="let user of users">
             <td>{{user.id}}</td>
             <td>{{user.username}}</td>
             <td>{{user.type}}</td>
             <td>{{user.modelname}}</td>
             <td>{{user.year}}</td>                                
          </tr>
        </tbody>
          <ng-template #noTableResults>
            <tr>
               <td> 
                 We are sorry , no users according to your search.
               </td>
            </tr>
         </ng-template>
     </table>        
</div>
    <br />
    <button (click)="downloadPDF()">Export to PDF</button>

这是我的 listuser.component.html

import { Component, ViewChild,ElementRef,OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';
@Component({
  selector: 'app-listuser',
  templateUrl: './listuser.component.html',
  styleUrls: ['./listuser.component.css'],
})
export class ListuserComponent implements OnInit {

  ngOnInit() {
    this.filteredUsers = this.users.slice();
    this._userService.getUsers().subscribe((users) => {
      this.users = users;          
    }, (error) => {
      console.log(error);
    })
  }

  @ViewChild('content') content:ElementRef;
  public downloadPDF(){
    let doc=new jsPDF();
    let specialElementHandlers={
      '#editor':function(element,renderer){
        return true;
      }
    };
    let content=this.content.nativeElement;
    doc.fromHTML(content.innerHTML,15,15 ,{
      'width':50,
      'elementHandlers':specialElementHandlers
    });

    doc.save('test.pdf');
  }
}

标签： angularjspdf

解决方案

我对 jsPDF 没有更多的想法，因为我没有更多地使用它。

在这里，我使用了一个名为pdfmake. 所以，我已经使用 package 更新了答案pdfmake。

按照以下步骤添加pdfmake到您的角度项目中：

安装pdfmake使用npm

npm i pdfmake

然后在组件的顶部添加以下行：

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

最后，添加这么多代码来创建和下载 pdf：

function generatePDF() {
 var docDefinition = {
  content: [
    {
      layout: 'lightHorizontalLines', // optional
      table: {
        headerRows: 1,
        widths: ['auto', 'auto', 'auto'],

        body: [
          ['Name', 'DOB', 'Status'], // headers
          ['Surjeet Bhadauirya', '22/08/1994', 'active'] // data
          ['Preeti', '23/01/1995', 'active']
        ]
      }
    }
  ]
};


this.users.forEach((user) => {
  let temp = [user.id, user.type, user.modelname, user.year, user.seating_capacity, user.milleage, user.pincode, user.number, user.email, user.cost];
  docDefinition.content[0].table.body.push(temp); 
});  

pdfMake.createPdf(docDefinition).download();
}

工作演示： https ://stackblitz.com/edit/angular-hcxlfw

推荐阅读