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

Question

我正在开发一个 vsts 网络扩展。我想要一个使用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

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;

配置文件

{
  "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()照常。

看这个链接

Answer 2

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

// 在 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>