Jspdf: fromHTML Uncaught TypeError: element.className.split is not a function at elementHandledElsewhere

[afro-coder]

Thank you for submitting an issue to jsPDF. Please read carefully.
I'm using flask and I found this code online for generating pdf's from a HTML div. The div is rendered from jquery load()
Are you using the latest version of jsPDF?
yes

Have you tried using jspdf.debug.js?
yes
Steps to reproduce
$(document).ready(function(){
$('#pdfcon').click(function(){
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#pdfcon').click(function () {
var doc = new jsPDF();
var source = $('#pdfco').html();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
doc.fromHTML(source, 0.5, 0.5, {
'width': 75,'elementHandlers': specialElementHandlers
});
doc.output("dataurlnewwindow");
});
});
});

The error:
Uncaught TypeError: element.className.split is not a function
at elementHandledElsewhere (jspdf.debug.js:7215)
at DrillForContent (jspdf.debug.js:7426)
at DrillForContent (jspdf.debug.js:7427)
at DrillForContent (jspdf.debug.js:7427)
at DrillForContent (jspdf.debug.js:7427)
at DrillForContent (jspdf.debug.js:7427)
at DrillForContent (jspdf.debug.js:7427)
at DrillForContent (jspdf.debug.js:7427)
at jspdf.debug.js:7595
at done (jspdf.debug.js:7470)

[Uzlopak]

Yeah
Probably source is not valid

[afro-coder]

It works otherwise only when I use it in conjunction with jquery Load()
it spits out this error

[Uzlopak]

Make

var source = $('#pdfco')[0];

[afro-coder]

tried that too it throws the same error

[Uzlopak]

Provide the html-code please.

The error Uncaught TypeError: element.className.split is not a function implies, that element is not of type HTMLElement and by thus doesnt supply an attribute className of type String, and by thus it is not having the method split.

[quetzaluz]

I've noticed this error can occur when there are svg elements in the html content. Either way providing the html code as requested well help debug.

[afro-coder]

@quetzaluz yes my html has google charts dynamically created I'll post the code as soon as possible

[Uzlopak]

It is kind of hacky but why dont you give the svg-Element an empty className-Attribute?

[Sould32]

I am getting the same error while trying to save contents of svg.

[mackersD]

I'm getting this error too on svg elements.

The className property on svg elements is an Object type SVGAnimatedString and therefore doesn't have the split method.

[shamel67]

What about changing:

classNames = element.className ? element.className.split(' ') : [];

for:

classNames = typeof(element.className) === 'string' ? element.className.split(' ') : [];

[quetzaluz]

Feel free to put up a PR doing so with spec coverage, the chief maintainers of this repo are pretty good with reviews (quick and thorough)

[Uzlopak]

If you provide the PR and test case I would merge it.

[chimung]

My element got a className but it also show that error.
<div id="chart" class="chart chart-owner">

[mackersD]

@arasabbasi, I was going to try to put up a PR, but I'm unable to get tests running on my windows machine right after pulling the codebase. Do you know if there are instructions on how to test this repo on Windows?

c:\dev\jsPDF>npm test

> [email protected] test c:\dev\jsPDF
> karma start saucelabs.karma.conf.js --single-run --verbose && for a in coverage/*; do codeclimate-test-reporter < "$a/lcov.info"; break; done

a was unexpected at this time.
npm ERR! Test failed.  See above for more details.

[Uzlopak]

Done in #1750

Who knows when the next release is :-/

[MrRio]

Reaaally soon.. 😬