Question

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

如果我只有2,3个字段，则显示正确，但是如果我有5,6个以上，则我的PDF文件显示如下。

如何解决此问题。

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

这是我的listuser.component.html

Input               Output
Satu I              Satu 1
Dua II              Dua 2
Tiga Iii            Tiga 3
empat Iv            empat 4
lima v              lima 5
enam VI             enam 6
Tujuh 7             Tujuh VII
delapan 8           Delapan VIII
Sembilan belas Ix   Sembilan belas 19
dua puluh xx        dua puluh 20
Dua Satu xxi        Dua Satu 21
No numeral          No numeral
No roman            No roman

这是我的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>

Answer 1

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

在这里，我使用了一个名为pdfmake的软件包。因此，我已经使用软件包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

jsPDF无法获得我的PDF的正确格式

1 个答案: