Как задать границы для автоматически создаваемого контента jspdf, как в шаблоне - PullRequest
Новая
       13

Как задать границы для автоматически создаваемого контента jspdf, как в шаблоне

0 голосов
/ 22 марта 2019

Я использую jspdf autotable для генерации pdf, но я не могу поставить границы, как в шаблоне. Может кто-нибудь помочь мне разобраться. мне нужно, чтобы PDF был просмотрен как в шаблоне.

Нужна граница заголовка, чтобы иметь 2 линии границы, как показано здесь в шаблоне.

enter image description here

Последние строки итогов будут отображаться следующим образом.

enter image description here

TS: 

captureScreen() {
    this.displayTable = true;
    var doc = new jsPDF();
    var col = ["2006", "Budgeted Operating Expenses ", 'Exclude', 'Expenses'];
    var rows = [];
    for (var i = 0; i < this.items.budget.length; i++) {
      var temp = []
      for (var key in this.items.budget[i]) {
        temp.push(this.items.budget[i][key])
      }
      rows.push(temp);
    }
    doc.text(100, 10, this.items.title.title);
    doc.text(20, 20, "Insert Property Name Here");
    doc.setFont("Times New Roman");
    doc.setFontSize(12);
    doc.text(20, 30, "Tenant:");
    doc.text(40, 30,  this.items.owner.company);

    doc.text(20, 40, "Address:");
    doc.text(40, 40,this.items.owner.address);

    doc.text(20, 50, "Suite:");
    doc.text(40, 50,this.items.owner.suite);


    doc.autoTable(col, rows,{
      tableLineColor: [189, 195, 199],
      tableLineWidth: 0.75,
    theme:"plain",  
    startY: 60,
    margin: {
        top: 60
    },
   headerStyles: {
        //Not getting what to be done here
    },
    });
    document.getElementById("convertToPdf").setAttribute('src', doc.output('datauri'))
  }

DEMO Заранее спасибо.

1 Ответ

1 голос
/ 22 марта 2019

jsPdf-autotable не имеет инструментов "из коробки" для создания границ ячеек в ( вверху || справа || внизу || слева ) или двойном бурении.

Вы можете использовать jspdf методы для ручной закраски необходимых элементов (линий): 

doc.autoTable(col, rows, {
        tableLineColor: [189, 195, 199],
        tableLineWidth: 0.75,
        theme: "plain",
        startY: 60,
        margin: {
            top: 60
        },
        drawRow: (row, data) => {
            //-------------------------------
            // Paint double lines bellow cell
            //-------------------------------
            let firstCell = row.cells[0];
            let secondCell = row.cells[1];
            if (firstCell.text == 'Total due anually') {
               let borderLineOffset = 1;
               const columnWidth = data.table.columns[3].width;
               data.doc.line(data.cursor.x - columnWidth, data.cursor.y + row.height - borderLineOffset / 2, data.cursor.x, data.cursor.y + row.height - borderLineOffset / 2);
               data.doc.line(data.cursor.x - columnWidth, data.cursor.y + row.height + borderLineOffset / 2, data.cursor.x, data.cursor.y + row.height + borderLineOffset / 2);
            }
            //-------------------------------
            // Paint footer line
            //-------------------------------
            if (secondCell.text == 'Totally sales Tax') {
                data.doc.line(data.cursor.x - data.table.width, data.cursor.y + row.height, data.cursor.x, data.cursor.y + row.height);
                data.doc.line(data.cursor.x - data.table.width, data.cursor.y + row.height, data.cursor.x, data.cursor.y + row.height);
            }
        },
        drawHeaderRow: (head, data) => {
            //---------------------------------------
            // Write the line at the bottom of header
            //---------------------------------------
            data.doc.line(data.cursor.x, data.cursor.y + head.height, data.cursor.x + data.table.width, data.cursor.y + head.height);
        }
    });

Здесь вы можете найти другие элементы для их рисования в формате pdf. jsPdf документы
StackBlitz

...