How to import this lib into react typescript?

[gamesover]

I am trying to import this lib into react typescript project.

import html2pdf from 'html2pdf.js'

Then create a typing.d.ts below

declare module 'html2pdf.js';

However, my project reports the below errors

fromRequireContextWithGlobalFallback.js:21 TypeError: _typeof is not a function
    at html2pdf.js:16
    at html2pdf.js:9
    at Object../node_modules/html2pdf.js/dist/html2pdf.js (html2pdf.js:10)

I opened the source file in chrome

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

/**
 * html2pdf.js v0.9.1
 * Copyright (c) 2018 Erik Koopmans
 * Released under the MIT License.
 */
(function (global, factory) {
  (typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('es6-promise/auto'), require('jspdf'), require('html2canvas')) : typeof define === 'function' && define.amd ? define(['es6-promise/auto', 'jspdf', 'html2canvas'], factory) : global.html2pdf = factory(null, global.jsPDF, global.html2canvas);
})(this, function (auto, jsPDF, html2canvas) {
  'use strict';

  jsPDF = jsPDF && jsPDF.hasOwnProperty('default') ? jsPDF['default'] : jsPDF;
  html2canvas = html2canvas && html2canvas.hasOwnProperty('default') ? html2canvas['default'] : html2canvas;

  var _typeof = typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol" ? function (obj) {
    return _typeof(obj);
  } : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof(obj);
  };

May I ask what's wrong with my config?

Thank you

[muyexi]

@gamesover Have you fixed it?

[gamesover]

No Luck, I used html2canvas and jsPDF in the end. html2pdf.js seems quite inactive now.

[Samerkassem]

Anyone?

[alexchoiweb]

@gamesover Thx dood I was able to follow your trail eons later. To those who come after me : https://stackoverflow.com/questions/26481645/how-to-use-html2canvas-and-jspdf-to-export-to-pdf-in-a-proper-and-simple-way

[samuelvernon]

For me it works in TypeScript:

import * as html2pdf from 'html2pdf.js';

...

const element = document.querySelector( '.my-element' );
const opt = {
    margin: 1,
    filename: 'myfile.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf.default( element, opt );

[rohmansca]

I can import and print, but the content is blank

[rohmansca]

I can import and print, but the content is blank

It solved in #517

[gashiartim]

Has anyone fixed it?

[MohdTahirMT]

html2canvas

NO

[annguyenprodev]

using CDN,

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

then

const newWindowObject = window as any const html2pdf = newWindowObject.html2pdf

[zaynekomichi]

Note this declaration module does not contain all the options, add the ones you need if they aren't enough!!!

1. Create a Custom Declaration File You can create a custom .d.ts file to declare the html2pdf.js module with TypeScript.

Steps to create the declaration file: Create a file called html2pdf.d.ts in your project, preferably inside a folder like src/types or @types. Example file structure:

src/
  types/
    html2pdf.d.ts

Add the following code to the html2pdf.d.ts file to declare the module:

declare module 'html2pdf.js' {
  interface Html2PdfOptions {
    margin?: number | [number, number, number, number];
    filename?: string;
    image?: { type: string; quality: number };
    html2canvas?: { scale: number };
    jsPDF?: { unit: string; format: string; orientation: string };
  }

  export default function html2pdf(
    element: HTMLElement | string,
    options?: Html2PdfOptions
  ): Promise<void>;
}

This file defines basic types for the html2pdf.js module and declares the module itself so TypeScript no longer complains about the missing type definitions.

2. Reference the Type Declaration File (if needed) In your tsconfig.json, make sure TypeScript knows where to find the custom type definitions by adding the typeRoots option if necessary:

{ "compilerOptions": { "typeRoots": ["./src/types", "node_modules/@types"] } }

3. Restart TypeScript Server After creating the declaration file, restart the TypeScript server (or your IDE) to apply the changes.

This should resolve the issue, allowing you to use html2pdf.js in your TypeScript project without errors.