如何在JSPDF Autotable的列中绘制矩形?

发布于 2025-01-23 23:41:29 字数 806 浏览 3 评论 0原文

我使用的是类星体和电子,并与JSPDF一起生产PDF,并使用自动操作。到目前为止,喜欢它,给了我很多控制权。

我需要在单元/行内放一个盒子。我可以在PDF上显示一个盒子,但是将其粘在所需的单元格中正在避开我。我一直在谷歌搜索,并且不太了解所有细节。

如您所见,黑框在左上方,我需要在每列内部绘制小红色框的框。

data.row.index是否对应于0列?它需要跳过前几行,这些行只是标题区域的rowspan。我没有定义列键...这是必要的吗?我一直在研究自动示例,并试图理解细节,但是文档并没有像我这样的新手那样详细说明。

我的数据是从数据库构建的数组中获取的。

我将继续使用Google,看看我是否可以弄清楚,但希望提供帮助。谢谢。

this.doc.autoTable({ 
  head: headers, 
  body: this.tableRows,
  theme: 'plain',
  didDrawCell: (data) => {
    if (data.row.index === 0 && data.row.section === 'body') {
       this.doc.rect(20, 20, 3, 3, 'F') // empty square
      }
    }
  })

I am using Quasar and Electron and producing PDFs with jsPDF and also using autotable. Love it so far, gives me a lot of control.

I need to place a box inside a cell/row. I can get a box to appear on the PDF but sticking it into the needed cell is eluding me. I've been googling and don't really understand all the details.

As you can see the little black box is on the top left, and I need a box inside each column where I've drawn the little red boxes.

does the data.row.index correspond to the 0 columns? It needs to skip the first few rows that are just rowSpan for the title areas. I do not have column keys defined... is that necessary? I've been looking at the autotable examples and trying to understand the details but the documentation isn't as elaborate as needed by a newbie such as myself.

My data is pulled from an array that's built from a database.

I will continue to Google and see if I can figure it out but would love help. Thanks.

this.doc.autoTable({ 
  head: headers, 
  body: this.tableRows,
  theme: 'plain',
  didDrawCell: (data) => {
    if (data.row.index === 0 && data.row.section === 'body') {
       this.doc.rect(20, 20, 3, 3, 'F') // empty square
      }
    }
  })

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文