javascript - PdfMake 要重复的项目列表(文本旁边的复选框)

Question

我正在使用 pdfMake，我在图像旁边有一个文本，我想在我的文档定义中重复该部分。

我想重复我的 pdfmake 的这一部分

{
      columns: [
        {
          image: "checked",
          height: 10,
          width: 10
        },
        {
          stack: [
            {
              columns: [
                {
                  text: 'First column first line',
                  width: '50%',
                  margin: [5, 0, 0, 0],
                }
              ]
            }
          ],
          width: '*'
        }]
    }

这是我的文档定义

let docDefinition = {
  pageSize: 'LEGAL',
  //pageOrientation: 'landscape', //may be usefull in some case
  pageMargins: [40, 80, 40, 60],
  content: [
    {
        ...
        this.getFailureLocationObject(),
        ...
    }

         
};

pdfMake.createPdf(docDefinition).download('Intervention' + '19060023');

我已经创建了这个应该返回对象列表的函数(ol) 我有一个对象，当函数重新调整时我想插入 ol o 没有问题我的图像显示在文本旁边 但是当我返回时ol insted 有一个奇怪的结果，图像和文本不再对齐，无论我添加多少对象到 ol 结果都是一样的，文本旁边只显示一个图像。我该如何解决这个问题谢谢你的帮助。

getFailureLocationObject() {const ol = [];

var o = {
  columns: [
    {
      image: "checked",
      height: 10,
      width: 10
    },
    {
      stack: [
        {
          columns: [
            {
              text: 'First column first line',
              width: '50%',
              margin: [5, 0, 0, 0],
            }
          ]
        }
      ],
      width: '*'
    }]
};

ol.push(o);
ol.push(o);

return o;

在这里你可以尝试我到目前为止所做的。并查看我已经硬编码“第一列第一行”、“第一列第二行”、“第一列第三行”的问题。但是我想要方法 this.getFailureLocationObject() 也循环并生成列表。

在这里试试吧!

https://stackblitz.com/edit/angular-pdfmake-example-3f14km?file=src%2Fapp%2Fapp.component.ts

Answer 1

在对您提供的代码进行了一些测试后，我发现问题出在对象的引用上。

因此，当 pdfmake 以某种方式获取值时，如果两者具有相同的引用(是相同的对象)，它会将它们混合。

我得出这个结论是因为当您更改代码时:

getFailureLocationObject() {
    const ol = [];

    var o = {
      columns: [
        {
          image: 'checked',
          height: 10,
          width: 10,
        },
        {
          stack: [
            {
              columns: [
                {
                  text: 'First column first line',
                  width: '50%',
                  margin: [5, 0, 0, 0],
                },
              ],
            },
          ],
          width: '*',
        },
      ],
    };

    ol.push(o);

    o = JSON.parse(JSON.stringify(o));

    ol.push(o);

    return ol;
}

错误不再发生。请注意，JSON.parse(JSON.stringify(o)) 创建了一个new JSON 对象，其content 与o 相同，这意味着这两个对象数组中的不同(因为对象不一样)

这可能是一个问题，需要报告给要修复的插件的开发人员。目前，解决方案是使用克隆将不同的对象添加到数组中。关于如何以及为什么使用克隆有很好的解释 here .

如有需要，请随时要求澄清!