Incorporate the pdfmake.js file into my TypeScript file

Question

Incorporate the pdfmake.js file into my TypeScript file

Working on a VSTS web extension and looking to utilize PDFmake.js to generate a pdf. The PDFmake.js file needs to be imported into the node_nodules folder by running npm install pdfmake.

To import this JavaScript file into my TypeScript file, I'm following these steps:

import pdfmake = require("../node_modules/pdfmake/build/pdfmake");

However, when attempting this method, it results in the following error:

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

typescript azure-devops

Answer 1

Answer №1

By combining the require and import methods, I was able to find a solution without making any special changes to tsconfig.json. Although I used pdfmake-unicode in my particular case, vfs_fonts should function similarly, I believe.

// on pdfmake: 0.1.38, pdfmake-unicode: 0.0.1

To install:

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

To import:

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';

To generate:

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');
}

To use:

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

Answer 2

By combining the require and import methods, I was able to find a solution without making any special changes to tsconfig.json. Although I used pdfmake-unicode in my particular case, vfs_fonts should function similarly, I believe.

// on pdfmake: 0.1.38, pdfmake-unicode: 0.0.1

To install:

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

To import:

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';

To generate:

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');
}

To use:

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

Answer 3

Answer №2

To implement this solution:

Step one,

npm install pdfmake --save

Next, add the following to typings.d.ts:

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

Thirdly, in the file where pdfMake is being utilized, whether it's a component or service, include the lines below:

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"]
}

Lastly, utilize pdfMake.xxx() as needed.

For more information, refer to this link

Answer 4

To implement this solution:

Step one,

npm install pdfmake --save

Next, add the following to typings.d.ts:

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

Thirdly, in the file where pdfMake is being utilized, whether it's a component or service, include the lines below:

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"]
}

Lastly, utilize pdfMake.xxx() as needed.

For more information, refer to this link

Answer 5

Answer №3

If you are working with "Typescript", follow these steps:

First, you need to install the necessary package:

npm i pdfmake --save

Next, import the required modules:

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

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

Answer 6

If you are working with "Typescript", follow these steps:

First, you need to install the necessary package:

npm i pdfmake --save

Next, import the required modules:

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

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

Answer 7

Answer №4

Check out this Angular 7 component inspired by the example from @Ruslan.

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

// set up the 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 necessary libraries
import * as pdfMake from 'pdfmake/build/pdfmake';

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.scss']
})
export class PdfComponent implements OnInit {
  // check https://pdfmake.github.io/docs/ for more info
  @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 8

Check out this Angular 7 component inspired by the example from @Ruslan.

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

// set up the 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 necessary libraries
import * as pdfMake from 'pdfmake/build/pdfmake';

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.scss']
})
export class PdfComponent implements OnInit {
  // check https://pdfmake.github.io/docs/ for more info
  @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 9

Answer №5

If you are trying to integrate this solution with Ionic 5 & Angular 10 using pdfMake v0.1.68, simply follow the instructions below for the necessary imports:

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');
     }
  }
}

If you encounter the following error during build/serve:

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.

To resolve this issue, execute the command:

npm i @types/node

and modify only /tsconfig.app.json as shown below:

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

Answer 10

If you are trying to integrate this solution with Ionic 5 & Angular 10 using pdfMake v0.1.68, simply follow the instructions below for the necessary imports:

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');
     }
  }
}

If you encounter the following error during build/serve:

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.

To resolve this issue, execute the command:

npm i @types/node

and modify only /tsconfig.app.json as shown below:

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

Answer 11

Answer №6

const pdfGenerator = require('pdfmake');
const vfsFonts = require('pdfmake/build/vfs_fonts');

(pdfGenerator).vfs = vfsFonts.pdfMake.vfs;

I've successfully implemented this in my Vue.js project using PDFMake version "^0.2.7".

Answer 12

const pdfGenerator = require('pdfmake');
const vfsFonts = require('pdfmake/build/vfs_fonts');

(pdfGenerator).vfs = vfsFonts.pdfMake.vfs;

I've successfully implemented this in my Vue.js project using PDFMake version "^0.2.7".

Incorporate the pdfmake.js file into my TypeScript file

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

NestJS Bull queues - Failing to secure job completion with a lock

Converting constants into JavaScript code

Converting an array of objects into a dictionary using TypeScript

What is the best way to define types for an array of objects with interconnected properties?

The synergy between ternary operators and Vue filters

Ways to determine the current active tab in React are:

I am having issues with the Okta Angular sign-in widget as it is not redirecting

Developing a Universal Type in Typescript

Strategies for Dealing with 'No Search Results' in Your Search Functionality

I'm looking for a way to modify the Turkish characters and spaces in the names of JSON data objects. I plan to do this using WebApi

Tips on obtaining checkbox values other than "true"

Guide to incorporating Bootstrap icons into an Angular application through programming techniques

Ways to eliminate duplicate objects from an array using Angular 6

Utilizing Visual Studio Code for setting breakpoints in Typescript Jasmine tests

Exploring methods to access specific values from an array containing multiple values using Lodash in Angular 4

nodemon failing to automatically refresh files in typescript projects

Exploring properties of nested elements in React

Exploring how to read class decorator files in a Node.js environment

An issue arises when trying to utilize meta tags in Nuxtjs while incorporating TypeScript into the

Exploring Mikro-ORM with Ben Awad's Lireddit: Navigating the Process of Running Initial Migrations