Angular 8 Pdfmake 包导致属性“内容”类型不兼容

问题描述 投票:0回答:2

我正在运行一个角度项目,其中使用 pdfmake 包,我需要生成 pdf,尽管我的终端上出现此错误,但它工作正常: 属性“内容”的类型不兼容。

这是终端截图

202:23 - error TS2345: Argument of type '{ content: ({ columns: ({ image: any; width: number; height: number; alignment: string; text?: undefined; fontSize?: undefined; margin?: undefined; color?: undefined; } | { text: any; fontSize: number; alignment: string; ... 4 more ...; height?: undefined; })[]; ... 4 more ...; bold?: undefined; } | { ...; } | { ......' is not assignable to parameter of type 'TDocumentDefinitions'.
  Types of property 'content' are incompatible.
    Type '({ columns: ({ image: any; width: number; height: number; alignment: string; text?: undefined; fontSize?: undefined; margin?: undefined; color?: undefined; } | { text: any; fontSize: number; alignment: string; ... 4 more ...; height?: undefined; })[]; ... 4 more ...; bold?: undefined; } | { ...; } | { ...; } | { ......' is not assignable to type 'Content'.
      Type '({ columns: ({ image: any; width: number; height: number; alignment: string; text?: undefined; fontSize?: undefined; margin?: undefined; color?: undefined; } | { text: any; fontSize: number; alignment: string; ... 4 more ...; height?: undefined; })[]; ... 4 more ...; bold?: undefined; } | { ...; } | { ...; } | { ......' is not assignable to type 'ArrayOfContent'.
        Types of property 'pop' are incompatible.
          Type '() => { columns: ({ image: any; width: number; height: number; alignment: string; text?: undefined; fontSize?: undefined; margin?: undefined; color?: undefined; } | { text: any; fontSize: number; alignment: string; ... 4 more ...; height?: undefined; })[]; ... 4 more ...; bold?: undefined; } | { ...; } | { ...; } | ...' is not assignable to type '() => Content'.
            Type '{ columns: ({ image: any; width: number; height: number; alignment: string; text?: undefined; fontSize?: undefined; margin?: undefined; color?: undefined; } | { text: any; fontSize: number; alignment: string; ... 4 more ...; height?: undefined; })[]; ... 4 more ...; bold?: undefined; } | { ...; } | { ...; } | { ...;...' is not assignable to type 'Content'.
              Type '{ columns: ({ image: any; width: number; height: number; alignment: string; text?: undefined; fontSize?: undefined; margin?: undefined; color?: undefined; } | { text: any; fontSize: number; alignment: string; ... 4 more ...; height?: undefined; })[]; ... 4 more ...; bold?: undefined; }' is not assignable to type 'Content'.
                Property 'tocItem' is missing in type '{ columns: ({ image: any; width: number; height: number; alignment: string; text?: undefined; fontSize?: undefined; margin?: undefined; color?: undefined; } | { text: any; fontSize: number; alignment: string; ... 4 more ...; height?: undefined; })[]; ... 4 more ...; bold?: undefined; }' but required in type 'ContentTocItem'.

202     pdfMake.createPdf(pdfTemplate).open();
                          ~~~~~~~~~~~

  node_modules/@types/pdfmake/interfaces.d.ts:251:5
    251     tocItem: boolean | string | string[];
            ~~~~~~~
    'tocItem' is declared here.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Failed to compile.

这是我用来生成 pdf 的函数,生成效果很好:

    const pdf: PdfMakeWrapper = new PdfMakeWrapper();
    const result: JustificationForm = Object.assign({}, this.justificationForm.value);
    const groupName = result.groupName.toString();
    const message = result.message.toString();

    var bodyDataRes = [];
    var bodyDataNot = [];


    if (this.responsibleList && this.responsibleList.length > 0) {
      this.responsibleList.forEach(function (sourceRow, index) {
        var dataRow = [];

        dataRow.push(`${index + 1}. ${sourceRow.title}`);
        bodyDataRes.push(dataRow)
      });
    }
    if (this.notResponsibleList && this.notResponsibleList.length > 0) {
      this.notResponsibleList.forEach(function (sourceRow, index) {
        var dataRow = [];

        dataRow.push(`${index + 1}. ${sourceRow.title}`);

        bodyDataNot.push(dataRow)
      });
    }
    const pdfTemplate = {
      content: [
        {
          columns: [
            { image: this.getBase64Image(),
              width: 168,
              height: 55,
              alignment: 'left',},
            {
              text: this.date,
              fontSize: 8,
              alignment: 'right',
              margin: [0, 20, 0, 0],
              color: '#7B7B7B'
            }
          ]
        },
        {
          text: '\n\n'
        },
        {
          text: 'Ansvarskort',
          fontSize: 16,
          alignment: 'left',
        },
        {
          text: groupName,
          fontSize: 20,
          alignment: 'left',
          margin: [0, 10, 0, 0],
          bold: true
        },
        {
          text: '\n\n',
        },
        { // PDF BODY
          columns: [
            [
              { //Right Side
              text: '\nMest ansvarlig\n',
              style: 'styleSection',
            },
            {
              ol:[
                {text: 'Egil Reichborn-Kjennerud', counter: 1, style: 'listItem'},
                {text: 'Heinrich Himmler', counter: 2, style: 'listItem'},
                {text: 'Karl Marthinsen', counter: 3, style: 'listItem'},
                {text: 'Gulbrand Vold-Hansen', counter: 4, style: 'listItem'},
                {text: 'Kurt Prüfer', counter: 5, style: 'listItem'},
                {text: 'Eugene Nilsen', counter: 6, style: 'listItem'},
                {text: 'Lise Hansen', counter: 7, style: 'listItem'},
              ],
            },
            [
              {
                text: '\nHadde ikke ansvar\n',
              style: 'styleSection',
              },
               {
                type: 'none',
                 ol: [
                  {text: 'Leif Strenge Næss', style: 'listItem'},
                  {text: 'Arne Wiik', style: 'listItem'}
                 ]
               }
            ]
          ],
            [{//Left Side
              text: 'Begrunnels',
              style: 'styleSection',
              margin: [0,20, 0, 20] 
            },
            {
              text:  message,
              fontSize: 12,
              alignment: 'left',
            }
          ]
          ]
        },
      ],

      styles: {
        styleSection: {
          bold: true,
          fontSize: 16,
        },
        styleBody: {
          fontSize: 18
        },
        listItem: {
          margin: [0 ,5 ,0 ,5]
        }
      }
    }

    pdfMake.createPdf(pdfTemplate).open();

  }```
javascript angular pdfmake
2个回答
2
投票

您可以将其转换为类型库中导出的类型。

import { Margins } from 'pdfmake/interfaces';

并像这样创建你的风格

margin: [20, 0, 40, 0] as Margins,

0
投票

将其更改为 从“pdfmake/build/pdfmake”导入*作为pdfMake;到 const pdfMake = require('pdfmake/build/pdfmake.js');摆脱了这个报告的错误。

© www.soinside.com 2019 - 2024. All rights reserved.