pdfmake 中的进度条

Question

我正在尝试使用 pdfmake js 库在 PDF 中实现进度条。完成此处提到的工作示例 vectors in pdfmake，但无法找到进度或部分填充的 canvas 示例。

我正在寻找一种解决方法，它描绘了矩形 canvas，并根据如下所示的动态值填充了颜色。

  {
    canvas: [         
      {
        type: 'line',
        x1: 40, y1: 100,
        x2: 260, y2: 100,
        lineWidth: 10,
        lineCap: 'square',
        lineColor: 'green',
       // fillPercentage: 20
      }          
    ]
  }

Answer 1

找到解决方法。

solution_1: 堆叠 2 行。

{
   canvas: [
    {
      type: 'line',
      x1: 10, y1: 100,
      x2: 100, y2: 100,
      lineWidth: 15,
      lineColor: '#eef2d7',
      lineCap: 'round'
    },
    {
      type: 'line',
      x1: 10, y1: 100,
      x2: 50, y2: 100, // 50 percent completion
      lineWidth: 15,
      lineColor: 'green',
      lineCap: 'round'
    }
  ]
}

solution_2: 堆叠 2 个矩形。

{
   canvas: [
    {
        type: 'rect',
        x: 0,
        y: 0,
        w: 100,
        h: 30,
        opacity: 0.1,
        color: 'white',
        lineColor: 'black'
    },
    {
        type: 'rect',
        x: 0,
        y: 0,
        w: 70, // 70 percent completion
        h: 30,
        color: 'green',
        lineColor: 'black'
    },
  ]
}

pdfmake 中的进度条

Progress bar inside pdfmake

javascript

pdfmake