打字稿:如何使用drawHeaderRow創建具有水平標題的表?

[英]Typescript: How to use drawHeaderRow to create table with horizontal headers?


jsPDF allows to create a table form JSON data and save that table into a PDF document. I have created a Angualr2/Typescript application to do the same. This create table form my JSON data. I'm trying to use jsPDF is create a table with horizontal headers. Example for this given here. Code to create that is as follows.

jsPDF允許創建表格形式的JSON數據並將該表格保存為PDF文檔。我已經創建了一個Angualr2 / Typescript應用程序來做同樣的事情。這個創建表構成了我的JSON數據。我正在嘗試使用jsPDF創建一個帶有水平標題的表。這里給出的例子。創建的代碼如下。

// Horizontal - shows how tables can be drawn with horizontal headers
examples.horizontal = function () {
  var doc = new jsPDF('p', 'pt');
  doc.autoTable(getColumns().splice(1,4), getData(), {
    drawHeaderRow: function() {
        // Don't draw header row
        return false;
    },
    columnStyles: {
        first_name: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'}
    }
  });
  return doc;
};

Complete code is available here. This code is written in JavaScript. I'm looking for a way to convert this into Typescript. Does anyone have any idea how to do it?

完整代碼可在此處獲得。此代碼是用JavaScript編寫的。我正在尋找一種方法將其轉換為Typescript。有誰知道怎么做?

1 个解决方案

#1


2  

Your component might look like this:

您的組件可能如下所示:

@Component({
  selector: 'my-app',
  template: 
    `<h1>JSON to PDF app</h1>
    <div class="container" id="div1">
        <button id="create" (click)="convert('base')">Create file</button> 
        <button id="create" (click)="convert('horizontal')">
           Create file with horizontal table
        </button> 
    </div>
    `
})
export class AppComponent {
  cols: Array<any> = [{
      title: "Details",
      dataKey: 'details'
    }, {
      title: "Values",
      dataKey: 'values'
   }];

  optionsContainer = {
    base: {},
    horizontal: {
      drawHeaderRow: () => false,
      columnStyles: {
          details: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'}
      }
    }
  };

  rows: Array<any> = [];

  constructor() {
    const item = {
      "Name" : "XYZ",
      "Age" : "22",
      "Gender" : "Male"
    }; 

    this.rows = Object.keys(item).map((key) => {  
      return { 'details': key, 'values': item[key] };
    });
  }

  convert(action){
    const doc = new jsPDF()
       .autoTable(this.cols, this.rows, this.optionsContainer[action]);
    doc.save('Test.pdf');
  }
}

Demo Plunker

演示Plunker


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/08/05/411a482c2f283ac02db46a8a1527b9f7.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com