Uncaught Error: unsupported number: NaN in pdfmake

[sganeshkumar]

Hi I am getting error like that Uncaught Error: unsupported number: NaN in pdfmake. One week before my pdf functionality working fine. Last week only I'm getting error like that. Issue occured in production only I cant reprodce this issue in my local machine.

my pdfmake bower version "pdfmake": "0.1.33",

Browser Console Error: Uncaught Error: unsupported number: NaN at PDFObject.number (/scripts/vendor2.7fdc0f3d.js:1) at addSegment (/scripts/vendor2.7fdc0f3d.js:1) at PDFDocument._fragment (/scripts/vendor2.7fdc0f3d.js:1) at PDFDocument._line (/scripts/vendor2.7fdc0f3d.js:1) at PDFDocument._text (/scripts/vendor2.7fdc0f3d.js:1) at PDFDocument.text (/scripts/vendor2.7fdc0f3d.js:1) at renderLine (/scripts/vendor2.7fdc0f3d.js:1) at /scripts/vendor2.7fdc0f3d.js:1 at PdfPrinter.createPdfKitDocument (/scripts/vendor2.7fdc0f3d.js:1) at Document._createDoc (/scripts/vendor2.7fdc0f3d.js:1)

Please help me.

[liborm85]

I need some code (docDefinition) to reproduce it. Without it can not help.

[sganeshkumar]

My code: var docDefinition = { content: [ 'First paragraph', 'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines' ] };

var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; // the hour '0' should be '12' minutes = minutes < 10 ? '0' + minutes : minutes; var strTime = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear() + ', ' + hours + ':' + minutes + ':' + seconds + ' ' + ampm; // download pdf file pdfMake.createPdf(docDefinition).download('Final Agreement to buy-' + strTime);

[liborm85]

docDefinition tested on playground and works ok.

[sganeshkumar]

yes working local and playground. Issue only in production.

[liborm85]

You probably generate another docDefinition production, check the differences.

[sganeshkumar]

I removed the pdfmake bower component from my bower.json and inculde the following line in my index.html Now working fine. I think one of my bower component stop the pdfmake functionality. you have any idea. Here I have attached the bower.json file.

{ "name": "ganesh", "version": "0.0.0", "dependencies": { "angular": "^1.5.1", "bootstrap": "^3.2.0", "angular-animate": "~1.5.1", "angular-aria": "~1.4.0", "angular-cookies": "~1.4.7", "angular-messages": "~1.4.0", "angular-resource": "~1.4.0", "angular-route": "~1.4.7", "angular-sanitize": "~1.4.0", "angular-touch": "1.6.2", "angular-material": "~0.11.4", "angular-segment-analytics": "^1.1.7", "angular-bootstrap-lightbox": "~0.10.0", "angular-inview": "~1.5.6", "angular-moment": "~0.10.3", "angular-translate": "2.8.1", "angular-bootstrap": "angular-ui-bootstrap-bower#~0.14.3", "angular-ui-router": "ui-router#~0.2.18", "angular-toastr": "~1.7.0", "angular-utils-ui-breadcrumbs": "~0.2.1", "a0-angular-storage": "0.0.13", "angular-jwt": "0.1.9", "md-date-time": "~0.1.0", "algoliasearch": "3.24.5", "angularjs-slider": "5.4.1", "ngstorage": "^0.3.11", "ng-focus-if": "^1.0.7", "algoliasearch-helper": "2.23.0", "pubnub": "3.16.5", "pubnub-angular": "~3.1.1", "angularUtils-pagination": "angular-utils-pagination#~0.9.2", "aws-sdk": "2.2.48", "angular-images-resizer": "~1.0.1", "ng-file-upload": "~10.1.11", "angular-local-storage": "~0.2.3", "d3": "3.5.12", "angular-hamburger-toggle": "~0.2.0", "angular-motion": "~0.4.3", "pdfmake": "0.1.33", "auth0.js": "8.7.0", "auth0-lock": "10.10.0", "angular-auth0": "1.0.7", "angular-lock": "2.0.2", "bower": "", "install": "^1.0.4", "oclazyload": "~1.1.0", "ng-idle": "~1.3.2", "ng-scrollbar": "^0.0.8", "angular-carousel": "^1.1.0" }, "devDependencies": { "angular-mocks": "^1.4.0", "algoliasearch": "3.19.2" }, "appPath": "app", "moduleName": "ganeshApp", "overrides": { "angular": { "dependencies": { "jquery": "" } }, "bootstrap": { "main": [ "less/bootstrap.less", "dist/css/bootstrap.css", "dist/js/bootstrap.js" ] }, "algoliasearch": { "main": [ "dist/algoliasearch.angular.js" ] } }, "resolutions": { "angular": "~1.5.1", "angular-translate": "2.8.1", "d3": "3.5.12", "auth0.js": "8.7.0", "auth0-lock": "10.10.0" } }

[liborm85]

I don't know why it does not work. You have many angular components, try to ask on angular forum.

[gilalan]

@sganeshkumar , many thanks to you man! I have the same issue and your solution works great for me! Have a nice day!

[giantslogik]

I ran into this issue it was caused by a & nbsp; in my the docDefinition content. I was able to workaround by doing content=JSON.parse(JSON.stringify(content)); The content was programatically generated from HTML;

[mhulet]

I ran into this issue on a Rails app. We were loading pdfmake through Yarn and adding it to the Rails assets pipeline.

I had to remove it from the pipeline and we are now loading the unminified version from cdnjs out of the assets pipeline. It works fine. It doesn't work with the minified version available on cdnjs (version 0.1.38).

[alessandroRoaro]

I had the same issue and couldn't figure it out, then I also added the viewBox attribute to the element and boom! it worked. Even though I also used SVGs in other places without the viewBox

[bheemprashanthreddy]

i had the same issue , ERROR Error: Uncaught (in promise): Error: unsupported number: NaN Error: unsupported number: NaN but nothing seems working for me , if any suggestions please let me know thanks in advance

[GuilhermeMesquita]

I fixed this changing widths: ['auto', 'auto', 'auto'], I had three columns but 5 values inside widths.

[bheemprashanthreddy]

i fixed it by passing attributes called 'height' , 'width' in the image tags . pdfmake gets the values of height and width as nan internally if those attributes are not specified , so if we provide these attributes within the img tag then we might avoid getting 'nan' values from pdfmake

[dbicps]

Make sure that number of columns are the same on body and widths. Make sure also that numbers in widths were not wrapped with quotations