把检查标记放在pdfmake报告中

时间:2017-04-19 02:55:33

标签: reactjs pdfmake

我有一个打印出工作报告的项目。我在pdfmake生成的报告中添加复选标记时遇到了麻烦我按照以下链接的说明进行操作:

我已按照那里的所有说明操作,但我的fontelo或fontawesome图标显示在我的报告中。同时使用fontawesome。图标显示方块没有真正的图标。希望有人可以帮我解决这个问题

3 个答案:

答案 0 :(得分:2)

也许你可以包含一些代码(最小的docDefinition和打印机部分)。

我的代码,使用fontawesome显示复选框/电台图标:

打印机部件:

var fonts = {
    Roboto: {
        normal: 'assets/fonts/Roboto-Regular.ttf',
        bold: 'assets/fonts/Roboto-Medium.ttf',
        italics: 'assets/fonts/Roboto-Italic.ttf',
        bolditalics: 'assets/fonts/Roboto-MediumItalic.ttf'
    },
    FontAwesome: {
        normal: 'assets/fonts/fontawesome-webfont.ttf'
    }
  };
// ...
var printer = new PdfPrinter(fonts);

和docDefinition。您可以尝试使用unicode代码

var dd = {
  content: { text: "\uf046   ", style: 'fontawesome' },
  styles: {
    fontawesome: {
      'font': 'FontAwesome',
      'color': "#656565"
    }
  }
}

答案 1 :(得分:1)

您可以使用canvas来绘制选中标记的正方形,如下所示

canvas: [
            {
                type: 'polyline',
                lineWidth: 1,
                closePath: true,
                points: [{ x: 0, y: 0}, { x: 8, y: 0 }, { x: 8, y: 8 }, { x: 0, y:8 }]
            }
        ]

,然后将其与column配合使用,使其看起来像复选框

答案 2 :(得分:1)

也许这个ASCII值可以为您工作? √√√√√√√√√

  • Mac:Option + v
  • Windows10:Alt + 251

您将获得此符号√,类似于对勾标记。

{
   text: '√',
   absolutePosition: { x: 21, y: 293 }
}

快乐编码! :)