Question

我正在开发一个vsts web扩展。我希望使用PDFmake.js文件生成pdf。通过安装PDFmake.js，imported文件为node_nodules到npm install pdfmake文件夹。

我希望import js file ts file到import pdfmake = require("../node_modules/pdfmake/build/pdfmake");。这就是我在做的事，

Severity    Code    Description Project File    Line    Suppression State
Error   TS5055  Cannot write file 'D:/TFS/DM Helper Tools/DEV/WebExtension/RapidCCB/build/pdfmake.js' because it would overwrite input file.    <Unknown>       1   Active

它给我以下错误。

setuid

Answer 1

遵循指示：

首先，

npm install pdfmake --save

其次，将以下内容添加到 typings.d.ts ：

declare module 'pdfmake/build/pdfmake.js';
declare module 'pdfmake/build/vfs_fonts.js';

第三，在使用pdfMake的文件中，无论是组件还是服务，请添加以下行：

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

<强> tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "ES5",
    "forceConsistentCasingInFileNames": true,
    "strictNullChecks": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,

    "typeRoots": [],
    "types": [] //Explicitly specify an empty array so that the TS2 @types modules are not acquired since we aren't ready for them yet.
  },
  "exclude": ["node_modules"]
}

最后，像往常一样使用pdfMake.xxx()。

请参阅此link

Answer 2

我发现以下结合使用require + import的解决方案，并且在tsconfig.json中没有任何特殊字符。我以为我使用的是pdfmake-unicode，但我想vfs_fonts应该也可以类似地工作。

// on pdfmake：0.1.38，pdfmake-unicode：0.0.1

安装：

npm install pdfmake --save
npm install pdfmake-unicode --save
npm install @types/pdfmake --save-dev

导入：

const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';

生成：

downloadTest = () => {
    const docDefinition = {
        content: [{
            table: {
                headerRows: 1,
                widths: ['*', 'auto', 100, '*'],
                body: [
                    ['First', 'Second', 'Third', 'Последняя'],
                    ['Value 1', 'Value 2', 'Value 3', 'Value 4'],
                    [{ text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Чё']
                ]
            }
        }]
    };
    pdfMake.createPdf(docDefinition).download('pdfmake.pdf');
}

使用：

<button onClick={this.downloadTest}>Download</button>

Answer 3

这是一个基于@Ruslan示例的Angular 7组件。

import {Component, Input, OnInit} from '@angular/core';

// configure pdf settings
import * as pdfMakeConfig from 'pdfmake/build/pdfmake.js';
import * as pdfFontsX from 'pdfmake-unicode/dist/pdfmake-unicode.js';
pdfMakeConfig.vfs = pdfFontsX.pdfMake.vfs;

// import core lib
import * as pdfMake from 'pdfmake/build/pdfmake';

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.scss']
})
export class PdfComponent implements OnInit {
  // see https://pdfmake.github.io/docs/
  @Input() pdf: any;
  @Input() filename = 'download.pdf';
  @Input() demo: boolean;

  constructor() { }

  ngOnInit() {
    if (this.demo) {
      this.pdf = {
        content: [
          {text: 'PdfComponent Example', style: 'header'},
          {text: 'This was generated using Angular and PdfMake', style: 'body'},
          {text: 'PdfMake', link: 'https://pdfmake.github.io/docs/', style: 'link'}
        ],
        styles: {
          header: {
            fontSize: 22,
            bold: true
          },
          body: {
            fontSize: 12
          },
          link: {
            fontSize: 12,
            color: '#03A9F4'
          }
        }
      };
    }
  }

  downloadTest() {
    pdfMake.createPdf(this.pdf).download(this.filename);
  }

}

<button (click)="downloadTest()">Download</button>

Answer 4

对于希望使用pdfMake v0.1.68的Ionic 5和Angular 10使其起作用的任何人，请仅在以下导入中使用

import { Component, OnInit } from '@angular/core';
const pdfMake = require('pdfmake/build/pdfmake.js');
const pdfFonts = require("pdfmake/build/vfs_fonts");
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';

@Component({
....
....
})
export class pdfPage implements OnInit {
...
    

  createPDF(){

     if(this.platform.is('cordova')){

     }else{
      pdfMake.createPdf(docDefinition).download('pdfmake.pdf');
     }
  }
}

如果您在构建/服务时遇到此错误

error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

然后运行命令

npm i @types/node

并仅更新/tsconfig.app.json，如下所示：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"] <---- add this line ONLY
  },

Answer 5

如果您使用的是“打字稿”，则：

安装：

npm i pdfmake --save

导入：

import * as pdfMake from "pdfmake / build / pdfmake";
import * as pdfFonts from 'pdfmake / build / vfs_fonts';

(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

将pdfmake.js文件导入我的ts文件

5 个答案: