首页 > 解决方案 > PDF 格式的 HTML 表格

问题描述

我正在尝试PDF使用JSPdf打印 HTML 表格。我的表有 20 列。因此,我无法打印整个表格。最后 4-6 列总是隐藏。有没有办法让隐藏的内容变得可见或降低?

HTML

<div class="table-responsive" >
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Year Lease</th>
            <th>user Name</th>
            <th>Total Rent</th>
            <th>Other Income</th>
            <th>Total Income</th>
            <th>Avg Expenses at 4 %</th>
            <th>Value Added Expense</th>
            <th>Other Expense</th>
            <th>Total Expense</th>
            <th>NOI</th>
            <th>CAP Rate</th>
            <th>Interest Paid</th>
            <th>Net Income</th>
            <th>Principal</th>
            <th>Yearly Cashflow</th>
            <th>Yearly</th>
            <th>DS Ratio</th>
          </tr>
        </thead>
        <tbody *ngFor="let userInfo of user;index as i">
          <tr>
            <td>Year {{i+1}} Leased</td>
            <td *ngFor="let user of  userInfo.user">{{user.amount | currency}}</td>
            <td>{{user.grossIncome | currency}}</td>
            <td>{{user.otherIncome | currency }}</td>
            <td>{{user.totalIncome | currency }}</td>
            <td>{{user.totalExpense}}</td>
            <td>{{user.valueAddedExpense | currency}}</td>
            <td>{{user.otherExpense  | currency}}</td>
            <td>{{user.totalExpense  | currency}}</td>
            <td>{{user.netOperatingIncome  | currency}}</td>
            <td>{{user.capRate}}% </td>
            <td>{{user.mortageInterest  | currency}}</td>
            <td>{{user.netIncome  | currency}}</td>
            <td>{{user.principle  | currency}}</td>
            <td>{{user.yearlyCashFlow  | currency}}</td>
            <td>{{user.yearly}} %</td>
            <td>{{user.deptServiceRatio}} %</td>
          </tr>
        </tbody>
      </table>
    </div>

TS

 var pdf = new jsPDF('p','pt', 'a3');
    pdf.internal.scaleFactor = 1.40;
    pdf.addHTML(this.print.nativeElement, 0, 0, {
      pagesplit: true
    },  ()=> {
      pdf.save('Report-' + new Date() + '.pdf');
    });

问题

在此处输入图像描述

之后还有 4 列CAP Rate。请帮帮我

标签: javascripthtmlcssangulartwitter-bootstrap

解决方案


Y 必须像这样设置您的 pdf 高度:

      var width = pdf.internal.pageSize.getWidth();    
      var height = pdf.internal.pageSize.getHeight();

推荐阅读