每页上的JSPDF自动自定义行

发布于 2025-02-09 00:51:07 字数 1412 浏览 1 评论 0原文

我正在为JSPDF使用Autotable，我想在每个页面的某个行上进行特定文本和样式的行，我不确定如何做到这一点。我不想使用标题。（我在每个页面上都使用标头进行通用标头。）我希望我的自定义“标头”行出现在第4行的第一页上，但是在后续页面上，我希望它在每个页面的第2行上。

我可以计算页面上的每一行，然后添加我的行，但这似乎很乏味。我认为也许我可以使用钥匙，但我不确定如何使用。我正在构建一个阵列，并使用它显示整个自动操作。

这些是我尝试过的事情：

计算每一行，然后在我想要的地方插入我的自定义行。但是，我不知道如何在没有rowspan的情况下格式化该行的5列。以下“内容”用法不起作用。我似乎只能在使用rowspan时使用“内容”。但是我希望我的个性化标头行中的每一列与下面的列对应。

this.tableRows.push(
  [
    {
      content: ['Armband'],['Dog'],['Breed'],['Owner'],
      styles: { halign: 'left', fillColor: [255, 255, 255], fontStyle: 'bold', lineWidth: .1, },
   }
  ]
)

也许我可以使用WillDrawCell，但我不确定该怎么做。我可以对第5行的第五行进行正常操作，但是如果我希望它在第一页的第五行中，则可以在后续页面的第一个第两个行，我该怎么做？

willDrawCell: (data) => {
  var doc = data.doc
  var rows = data.table.body
  console.log('doc ', data)
  if (data.row.index === 5) {
    doc.setFont(undefined, 'bold')
    doc.setFillColor(192, 192, 192)
    doc.setTextColor(0, 0, 0)
  } else {
    doc.setTextColor(0, 0, 0)
  }
},

这是我的第一页：

.x .x 。 x 。 x 。

这是第2页，我希望自定义标头行显示：

我感谢任何帮助。

原文

I'm using autotable for jsPDF and I want to put a row with specific text and styling on a certain row of every page and I'm not sure how to do this. I don't want to use the header. (I am using the header for a generic header on every page.) I want my custom 'header' row to appear on the first page on row 4, but on subsequent pages, I want it on row 2 of each page.

I can count every line on the page and then add my row in, but that seems tedious. I think maybe I can use a key, but I'm not sure how. I am building an array and using that to display the entire autotable.

These are the things I have tried:

Count every row and plop my custom row where I want it. However, then I don't know how to format that row that has 5 columns, without a rowspan. The below 'content' usage doesn't work. I seem to be only able to use the 'content' when I use a rowspan. But I want each column in my personalized header row to correspond with the columns below them.

this.tableRows.push(
  [
    {
      content: ['Armband'],['Dog'],['Breed'],['Owner'],
      styles: { halign: 'left', fillColor: [255, 255, 255], fontStyle: 'bold', lineWidth: .1, },
   }
  ]
)

Maybe I can use willDrawCell but I'm not sure how to do that either. I can do it fine for row number 5, but if I want it on the fifth row of page one, then row two of subsequent pages, how would I do that?

willDrawCell: (data) => {
  var doc = data.doc
  var rows = data.table.body
  console.log('doc ', data)
  if (data.row.index === 5) {
    doc.setFont(undefined, 'bold')
    doc.setFillColor(192, 192, 192)
    doc.setTextColor(0, 0, 0)
  } else {
    doc.setTextColor(0, 0, 0)
  }
},

Here is my first page: