Jspdf: ES6 import doesn't work in versions 1.5.1 and 1.5.2

[vzhikness]

I'm trying to import jspdf into my Vuejs application. But looks like it imports function RGBColor instead of the the module.

Are you using the latest version of jsPDF?
Yes

Have you tried using jspdf.debug.js?
Yes

Steps to reproduce

import jsPDF from 'jspdf/dist/jspdf.debug';
console.log(jsPDF);

or

import * as jsPDF from 'jspdf/dist/jspdf.debug';
console.log(jsPDF);

What I saw
Output in versions 1.5.1 and 1.5.2:

RGBColor()
​  length: 1
​  name: "RGBColor"
  ​prototype: Object { … }
​  __proto__: function ()

What I expected
Output in 1.4.1:

jsPDF()
  ​API: Object { events: (13) […], addField: addField(), addButton: addButton(), … }
​  length: 4
​  name: "jsPDF"
​  prototype: Object { … }
​  saveAs: function saveAs()
​  version: "0.0.0"
​  __proto__: function ()

Is something wrong with my setup?

My env:

$ vue info

Environment Info:

  System:
    OS: Windows 7
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
  Binaries:
    Node: 8.11.3 - C:\Programs\Devel\node\node.EXE
    Yarn: Not Found
    npm: 6.5.0 - C:\Programs\Devel\node\npm.CMD
  npmPackages:
    @vue/babel-preset-app:  3.2.0
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.1
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.1
    @vue/eslint-config-airbnb: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0
    vue: ^2.5.17 => 2.5.21
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
  npmGlobalPackages:
    @vue/cli: Not Found

[StaverDmitry]

I'm just confirming the same issue with a vue app.
Just tried using html2pdf and tracked the issue down to jsPDF.
jsPDF itself works fine with jspdf.debug.js

[Uzlopak]

Ok, will check it.

[paolomangiadev]

+1

[mortyUI]

+1

[Uzlopak]

Ok, how about... i modify it as necessary i think and you test it then?

[paolomangiadev]

@arasabbasi for sure, i'm using release 1.4 atm

[snimmagadda1]

Also having this issue w/ html2pdf ... have y'all found a workaround? (currently in a react application using html2pdf

[Uzlopak]

Hello @snimmagadda1

what do you mean with "html2pdf"?

[snimmagadda1]

@arasabbasi this library which uses jspdf- https://github.com/eKoopmans/html2pdf. I was referencing it b/c it seemed like @StaverDmitry was also using? I'm seeing the TypeError: e.charAt is not a function..

[Uzlopak]

yeah, this is the same error. I am working on it.

[kenanaReda]

I've installed the library and face the same error on angular7 , Does anyone find a solution?

[brent-williams]

@kenanaReda if you downgrade jspdf to 1.4.1 that gets rid of the error. @snimmagadda1 html2pdf latest seems to work with jspdf 1.4.1 as well.

[kenanaReda]

Thanks @brent-williams ! I've downgrade it and an error is appear
ERROR TypeError: doc.text is not a function
couldn't solve it :| I'm not sure what the reason for that

[Uzlopak]

@kenanaReda

We have an issue with the exports. I am fixing it right now.

[Uzlopak]

Can you try this one?

Removed the dist.zip

[kenanaReda]

ERROR TypeError: doc.text is not a function is solved be adding @types/jspdf and downgrade jspdf to 1.4.1
@arasabbasi @brent-williams
when fixing the wxport issue in next release I'll upgrade it
Thanks!

[Uzlopak]

@kenanaReda

What is the part of fixing by regressing?

[kenanaReda]

@arasabbasi no error in console but Module ''jspdf'' has no default export` is still appear
I mean finally I can export a pdf without errors in console
just a good temporary solution

[Uzlopak]

Doing
node jspdf.debug.js
and
node jspdf.node.debug.js

and is running through without error messages.

npm run-script test-local

is running without errors

testing the examples in the examples folder are working

So the only thing i need is a feedback if the export of jspdf in the framework is working... or not.

[Uzlopak]

@vzhikness
@StaverDmitry
@paolomangiadev
@mortyUI
@snimmagadda1
@brent-williams

Can you please test the builds i provided above?

[brent-williams]

@arasabbasi I'm willing to try but I'm using jspdf from html2pdf. I took the files from your .zip and overwrote the jspdf .js 1.4.1 files in ~/node_modules/jspdf/dist/*.js files. Got error below, not sure if there is still a problem with jspdf or if it's just a side-effect of my hacking the node_modules folder.

Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at new le (jspdf.min.js:209)

[Uzlopak]

hmm, let me see.

[Uzlopak]

@brent-williams

Please try this:

Removed the dist.zip

But somehow... I mean you use bloburl?

[paolomangiadev]

Hi @arasabbasi, i've tried your zip but the import isn't working with none of the following import methods:

import * as jsPDF from 'jspdf'

or 

import jsPDF from 'jspdf' // ts: Module '"jspdf"' has no default export.

or

declare var jsPDF: any;

script i'm using:

import * as jsPDF from 'jspdf'

const doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]
})

doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

i don't get any import errors in ts-lint, but when i try to save the file nothing happens and no errors are shown in console.

dependencies:

angular: "@angular/core": "^6.1.0",
jspdf: "jspdf": "^1.4.1", // downgraded but has your files in node_modules
jspdf-autotable: "jspdf-autotable": "^2.3.5",
typescript: "typescript": "~2.9.2"

hope it helps smh 😃

[brent-williams]

Hi @abbasi-aero I tried the new zip, got same error (below). My setup is react/html2pdf w/ relevant code below, again it works fine w/ jsPDF 1.4.1.

  import html2pdf from 'html2pdf.js'

// ..

  download() {
    var element = document.getElementById('target');
    var options = {
      margin: 1,
      filename: 'yada.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { width: 1000 },
      pagebreak: { mode: 'avoid-all' },
      jsPDF: { format: 'letter', orientation: 'portrait' }
    };

    html2pdf(element, options);
  }

// ..

  <div id="target">yadayada</div>

jspdf.min.js:209 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at new le (jspdf.min.js:209)
    at Promise.toPdf_main (html2pdf.js:323)

[brent-williams]

RE: bloburl I'm not familiar with the html2pdf source but can confirm it is mentioned at several points in the code there.

[Uzlopak]

@brent-williams

Did you use the dist-files from the zip-file from here? https://github.com/MrRio/jsPDF/issues/2176#issuecomment-449753259

@paolomangiadev

can you provide me a simple project, zipped, so that i can test it locally, without investing multiple hours to rebuild a test case.

[brent-williams]

@arasabbasi that's correct, I just double-checked I didn't have old cached versions or anything, the zip from #2176 and the previous zip both gave the errors specified.

[Uzlopak]

That is strange. Can you use the debug-files? Because minified is not possible to debug.

[brent-williams]

Hi @arasabbasi I renamed the debug file to min, threw it into the npm jsPDF dist and got the below error in the console:

jspdf.min.js:17603 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at new saveAs (jspdf.min.js:17603)
    at Promise.toPdf_main (html2pdf.js:323)

[Uzlopak]

This seems to be a problem in filesaver.js. I regressed to filesaver 1.3.8 for the following build. Can you test it please?

Removed the dist.zip

[brent-williams]

@arasabbasi we have a winner! No error with the latest dist.zip, nice.

[Uzlopak]

Can the others confirm, that it works with the built from the last dist.zip?

If so, I would ask James to release 1.5.3

[Uzlopak]

I realized, that npm is not loading file-saver in version 1.3.8, but 1.3.2.
This can result in failure. This built is in my opinion working in all targets.

Removed the dist.zip

[paolomangiadev]

@arasabbasi Last dist.zip works on my end!

[snimmagadda1]

Can the others confirm, that it works with the built from the last dist.zip? ...

@arasabbasi thanks for the speedy updates! Unfortunately I don’t get much Internet for the next few days but as soon as I can get online I will confirm, though my use case is similar to @brent-williams so I’d expect similar positive results

_{Sent with GitHawk}

[kenanaReda]

@arasabbasi
Thanks for your effort!
I've tried this version 1.3.2 and still has error TS1192: Module ''jspdf'' has no default export. even when trying the Last build in Angular 7
any suggestion plz?

[Uzlopak]

What you mean you tried version 1.3.2?

What about
https://stackoverflow.com/questions/40429927/error-ts1192-module-a-module-has-no-default-export

[kenanaReda]

What you mean you tried version 1.3.2?

What about
https://stackoverflow.com/questions/40429927/error-ts1192-module-a-module-has-no-default-export

yeah it works when I import it like
import * as jsPDF from 'jspdf';
but in Readme, the instruction to import jspdf in angular 7 is like this
import jsPDF from 'jspdf';
I've replaced it
Many thanks for your answers

[Uzlopak]

corrected the readme

[Uzlopak]

Ok, wrote with James. I prepare a build and we will have version 1.5.3 tonight/tomorrow.

[rocketz2018]

using Vue.js
already tried all methods above but still get
Uncaught TypeError: t.charAt is not a function
at new e (jspdf.min.js?b003:269)

can you help @arasabbasi ?

[Uzlopak]

Do you use fromHTML? context2d?

[rocketz2018]

I'm using jsPdf

[Uzlopak]

I made some changes, please try these files.

Removed the dist.zip

[rocketz2018]

it works, thanks.

[StaverDmitry]

Hello, thank you so much, the last one works for me with html2pdf and Vue :)
Is the last dist going to be present in a new version soon?
Just want to know when I can set a version on the package and forget about it :)

[Uzlopak]

@StaverDmitry
Well James has to do the release ;). I already asked him and he gave me a positive feedback. But you know it is christmas in the UK so you know family comes first ;). But should be done soon.

btw. If you use html2pdf try our latest html method. See for this in the folder "examples/html2pdf" for examples. It still depends on html2canvas, but instead of painting a canvas, it directly writes into the pdf. So the files are smaller in filesize and you can select text etc.. Give it a try and give some feedback, on how we can improve it.

[StaverDmitry]

Thank you, it's ok, no rush and happy christmas :)
Sure, I'll give it a try, I'm especially interested in being able to select text

[Tahywoh]

It is still the same for me here, not working:

The error remains:

jspdf.debug.js?6964:22371 Uncaught TypeError: Cannot read property 'charAt' of undefined

Whether i use import jsPDF from 'jspdf' or
import jsPDF from 'jspdf/dist/jspdf.debug' .

I am using vue js.

Please kindly help me out.

Thanks in anticipation of your response

[Uzlopak]

@Tahywoh
See https://github.com/MrRio/jsPDF/issues/2176#issuecomment-449899419

[Tahywoh]

Even after trying the new zip.

Thanks in anticipation of your quick response

[Tahywoh]

I have tried the new dist.zip but still the same. Please help me look into it.

Thanks

[Uzlopak]

jspdf.debug.js?6964:22371

What does this mean? line 6964 at character 22371? jspdf.debug.js doesnt have this position.

I checked right now jspdf.debug.js. charAt is used 34 times. The only case where a charAt exception could still happen, would mean, that you supplied invalid data for a custom font.

I made very small changes. Check the following dist-files.

Removing dist zip

But lets be honest: If this doesnt fix your issue, the problem is on your side and not on my side. Probably you use a framework which builds the code. So just changing the files in the modules folder is not enough. you have to recompile your source after changing the libs. If you can't change the jspdf lib, then wait till we release the next version.

[iamstiil]

Hi everyone.
I made a minimal version on stackblitz. I think the exports are still not fixed.

https://stackblitz.com/edit/angular-cru6ud

[Uzlopak]

James just released v 1.5.3 !!!

Update your projects :)

[iamstiil]

Can confirm:
v1.5.3 works with Angular 7.1.4 using import * as jsPDF from 'jspdf';

[Tahywoh]

jspdf.debug.js?6964:22371

What does this mean? line 6964 at character 22371? jspdf.debug.js doesnt have this position.

I checked right now jspdf.debug.js. charAt is used 34 times. The only case where a charAt exception could still happen, would mean, that you supplied invalid data for a custom font.

I made very small changes. Check the following dist-files.

Removed by Aras

But lets be honest: If this doesnt fix your issue, the problem is on your side and not on my side. Probably you use a framework which builds the code. So just changing the files in the modules folder is not enough. you have to recompile your source after changing the libs. If you can't change the jspdf lib, then wait till we release the next version.

Working now, thanks....

[Uzlopak]

Closing

[brent-williams]

@arasabbasi just fyi the 1.5.3 npm release reintroduces #1959. The dist.zip you posted to this thread (and removed! :( :) does not have this problem.

[Uzlopak]

Are you serious???

[Uzlopak]

Wouldnt be the fix to use the jspdf.node.min.js for the ssr?

[brent-williams]

I don't know, I guess (?) it's up to html2pdf. I'm using Gatsby which might be an odd use-case as jspdf is imported by node at build time but only runs in the browser at runtime. All I can say the posted dist.zip worked and the 1.5.3 release does not but this may deserve a separate issue.

[Uzlopak]

Well what should I do?

[brent-williams]

Your call of course! If it was me, I'd re-close this issue (which is in all fairness fixed) and possibly just wait for a proper dup to be supplied using react/whatever as you requested in #1959. Thanks for fast response in resolving this issue #2176.

[Uzlopak]

Ok, you have to know, it was kind of very stressful week with this release "implosion".

[Uzlopak]

Closed

[brent-williams]

Job well done. Beer o'clock perhaps :).

[shujaatkulvi]

Use
import * as jspdf from 'jspdf/dist/jspdf.node.debug.js';
This includes the addImage method but it doesnot include SaveAs method sot it will give you an error of SaveAs method.
Next step is to add the code below in jspdf.node.debug.js for save method, just copy paste it and it will work.

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define([], factory);
} else if (typeof exports !== "undefined") {
factory();
} else {
var mod = {
exports: {}
};
factory();
global.FileSaver = mod.exports;
}
})(window, function () {
/*

• FileSaver.js
• A saveAs() FileSaver implementation.
  *
• By Eli Grey, http://eligrey.com
  *
• License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
• source : http://purl.eligrey.com/github/FileSaver.js
  */
  // The one and only way of getting global scope in all environments
  // https://stackoverflow.com/q/3277182/1008999

var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;

function bom(blob, opts) {
if (typeof opts === 'undefined') opts = {
autoBom: false
};else if (typeof opts !== 'object') {
console.warn('Depricated: Expected third argument to be a object');
opts = {
autoBom: !opts
};
} // prepend BOM for UTF-8 XML and text/* types (including HTML)
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF

if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
  return new Blob([String.fromCharCode(0xFEFF), blob], {
    type: blob.type
  });
}

return blob;

}

function download(url, name, opts) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';

xhr.onload = function () {
  saveAs(xhr.response, name, opts);
};

xhr.onerror = function () {
  console.error('could not download file');
};

xhr.send();

}

function corsEnabled(url) {
var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker

xhr.open('HEAD', url, false);
xhr.send();
return xhr.status >= 200 && xhr.status <= 299;

} // a.click() doesn't work for all browsers (#465)

function click(node) {
try {
node.dispatchEvent(new MouseEvent('click'));
} catch (e) {
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
node.dispatchEvent(evt);
}
}

var saveAs = _global.saveAs || // probably in some web worker
typeof window !== 'object' || window !== _global ? function saveAs() {}
/* noop */
// Use download attribute first if possible (#193 Lumia mobile)
: 'download' in HTMLAnchorElement.prototype ? function saveAs(blob, name, opts) {
var URL = _global.URL || _global.webkitURL;
var a = document.createElement('a');
name = name || blob.name || 'download';
a.download = name;
a.rel = 'noopener'; // tabnabbing
// TODO: detect chrome extensions & packaged apps
// a.target = '_blank'

if (typeof blob === 'string') {
  // Support regular links
  a.href = blob;

  if (a.origin !== location.origin) {
    corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');
  } else {
    click(a);
  }
} else {
  // Support blobs
  a.href = URL.createObjectURL(blob);
  setTimeout(function () {
    URL.revokeObjectURL(a.href);
  }, 4E4); // 40s

  setTimeout(function () {
    click(a);
  }, 0);
}

} // Use msSaveOrOpenBlob as a second approach
: 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {
name = name || blob.name || 'download';

if (typeof blob === 'string') {
  if (corsEnabled(blob)) {
    download(blob, name, opts);
  } else {
    var a = document.createElement('a');
    a.href = blob;
    a.target = '_blank';
    setTimeout(function () {
      click(a);
    });
  }
} else {
  navigator.msSaveOrOpenBlob(bom(blob, opts), name);
}

} // Fallback to using FileReader and a popup
: function saveAs(blob, name, opts, popup) {
// Open a popup immediately do go around popup blocker
// Mostly only avalible on user interaction and the fileReader is async so...
popup = popup || open('', '_blank');

if (popup) {
  popup.document.title = popup.document.body.innerText = 'downloading...';
}

if (typeof blob === 'string') return download(blob, name, opts);
var force = blob.type === 'application/octet-stream';

var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;

var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);

if ((isChromeIOS || force && isSafari) && typeof FileReader === 'object') {
  // Safari doesn't allow downloading of blob urls
  var reader = new FileReader();

  reader.onloadend = function () {
    var url = reader.result;
    url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
    if (popup) popup.location.href = url;else location = url;
    popup = null; // reverse-tabnabbing #460
  };

  reader.readAsDataURL(blob);
} else {
  var URL = _global.URL || _global.webkitURL;
  var url = URL.createObjectURL(blob);
  if (popup) popup.location = url;else location.href = url;
  popup = null; // reverse-tabnabbing #460

  setTimeout(function () {
    URL.revokeObjectURL(url);
  }, 4E4); // 40s
}

};
_global.saveAs = saveAs.saveAs = saveAs;

if (typeof module !== 'undefined') {
module.exports = saveAs;
}
});