jsPDF: getTextDimensions expects text-parameter to be of type String or type Number or an Array of S | Appsmith | Page 1

granite token Apr 12, 2023, 12:20 PM

#

Hi I've been following Confidence's tutorial on using jsPDF and for the life of me still could not make it run. Here's the code on my JS Object

export default {
genInvoice: async () => {
const doc = await new jspdf.jsPDF();
doc.text("title", 20, 20);
doc.table(20, 30, Table1.tableData, Table1.columnOrder, {autoSize: true});
await download(doc.output(), "invoice.pdf");
}
}

and this is the errori keep getting:

getTextDimensions expects text-parameter to be of type String or type Number or an Array of Strings.

I just wanted to create a pdf file based on the table i have just like the one in the tutorial.

I am using CE 1.9.15

vernal hearthBOT Apr 12, 2023, 12:21 PM

#

Hey There,

We've registered your query, and our team will get back to you soon. In the
meantime, you can check if @kapa.ai can assist you.

e.g you can ask - @kapa.ai how can I self-host appsmith on docker?

Examples -

Self-host Appsmith
[https://discord.com/channels/725602949748752515/1095286890845974561]
Merge data from two APIs
[https://discord.com/channels/725602949748752515/1095288199934398514]

Regards,
Pranav

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

vernal hearthBOT Apr 12, 2023, 1:18 PM

#

Hi there!
Can you share a URL to this video?

granite token Apr 12, 2023, 1:37 PM

#

https://youtu.be/xXssLXQvdyY

YouTube

Appsmith

How To Use Custom JavaScript Libraries

Always wanted to use JavaScript libraries in your low-code apps? Announcing the custom JS library feature which enables you to use any JS library of your choice. This video is a walkthrough of how to build cool apps with this feature

Learn more about custom JavaScript libraries in Appsmith https://bit.ly/appsmith-docs-custom-javascript-librarie...

▶ Play video

#

i tried this on cloud hosted appsmith and it workd. now im suspecting values i have in the table. i have formatted some with number(). style etc.

#

also there is a date column but formatted using default appsmith formatting for dates

#

do i have to convert the values in the table to strings to makes this work? any guide hiw i could do it?

#

here's my table

#

#

2nd and 3rd column was formatted with
{{currentRow["pointValue"].toLocaleString("en-US", {style:"currency", currency:"USD"}).toString()}}

#

trying the js object code works with a newly added table

#

the values i am using the table is from a database query as json sent to the table

vernal hearthBOT Apr 12, 2023, 9:37 PM

#

Could you send the output of the following function? Sending in a separate
message to preserve tabs.

mild wasp Apr 12, 2023, 9:39 PM

#

debug: () => {
  return Object.values(Table1.tableData[0]).map(value => typeof value)
}

granite token Apr 13, 2023, 4:58 AM

#

running debug function

#

running genInvoice

granite token Apr 13, 2023, 12:16 PM

#

hello, find anything wrong?

#

i dont know why there's undefined when using genInvoice yet Table1 has data

vernal hearthBOT Apr 13, 2023, 6:53 PM

#

The result of the function checks out. @weak sinew Do you have any
idea here?

I'll also raise this internally.

vernal hearthBOT Apr 14, 2023, 3:49 AM

#

This error usually occurs when there is an undefined cell in the table. Can you
verify that there are no undefined cells in the table?

granite token Apr 14, 2023, 6:07 AM

#

yes, there's no undefined cell value

#

[
{
"modifiedDate": "2023-01-31",
"Amount": 13581.56,
"Point": 14159.7
},
{
"modifiedDate": "2023-01-30",
"Amount": 9395.66,
"Point": 8920.25
},
{
"modifiedDate": "2023-01-29",
"Amount": 9170.19,
"Point": 8528.03
},
{
"modifiedDate": "2023-01-28",
"Amount": 8929.69,
"Point": 7693.26
},
{
"modifiedDate": "2023-01-27",
"Amount": 31278.78,
"Point": 30152.12
},
{
"modifiedDate": "2023-01-26",
"Amount": 17219.1,
"Point": 17787.98
},
{
"modifiedDate": "2023-01-25",
"Amount": 24348.23,
"Point": 25016.72
},
{
"modifiedDate": "2023-01-24",
"Amount": 13996.99,
"Point": 15903.32
},
{
"modifiedDate": "2023-01-23",
"Amount": 16624.4,
"Point": 18503.52
},
{
"modifiedDate": "2023-01-22",
"Amount": 14983.77,
"Point": 16465.47
},
{
"modifiedDate": "2023-01-21",
"Amount": 6780.92,
"Point": 6408.35
},
{
"modifiedDate": "2023-01-20",
"Amount": 7370.02,
"Point": 8587.74
},
{
"modifiedDate": "2023-01-19",
"Amount": 10097.61,
"Point": 10090.06
},
{
"modifiedDate": "2023-01-18",
"Amount": 12059.85,
"Point": 10784.25
},
{
"modifiedDate": "2023-01-17",
"Amount": 10809.84,
"Point": 10450.85
},
{
"modifiedDate": "2023-01-16",
"Amount": 7884.14,
"Point": 7667.35
},
{
"modifiedDate": "2023-01-15",
"Amount": 3862.73,
"Point": 3578.53
},
{
"modifiedDate": "2023-01-14",
"Amount": 2236.28,
"Point": 1941.17
},
{
"modifiedDate": "2023-01-13",
"Amount": 2506.37,
"Point": 2412.66
},
{
"modifiedDate": "2023-01-12",
"Amount": 2119.4,
"Point": 1271.93
},
{
"modifiedDate": "2023-01-11",
"Amount": 864.58,
"Point": 589.76
},
{
"modifiedDate": "2023-01-06",
"Amount": 64.87,
"Point": 109.64
}
]

#

@frank hamlet hey, could you help me out on this please?

granite token Apr 14, 2023, 6:37 AM

#

i tried putting the values in the table manually, using the above values and the error still persist

#

granite token Apr 14, 2023, 7:01 AM

#

managed to get here, but the values are not rendered

#

#

using the data i sent above

granite token Apr 14, 2023, 7:53 AM

#

found the problem, jsPDF would only accept strings, I have to convert all values to string

#

#

having problems on function converting all values to string

granite token Apr 14, 2023, 8:38 AM

#

@mild wasp ?

mild wasp Apr 14, 2023, 6:26 PM

#

You can use a map to convert all of the values @granite token 🙂

const formattedData = Table1.tableData.map(item => ({
  modifiedDate: item.modifiedDate.toString(),
  Amount: item.Amount.toString(),
  Point: item.Point.toString()
}))

granite token Apr 15, 2023, 7:07 AM

#

mild wasp You can use a map to convert all of the values <@473374794994417664> 🙂 ```js ...

thank you. I actually tried this but still did not worked 😞

vernal hearthBOT Apr 17, 2023, 4:22 PM

#

Does it give the same error?

Could you invite [email protected] as a developer to your app and provide a
link to the page this is on?

frank hamlet Apr 18, 2023, 12:08 PM

#

@granite token could you try using JSON.stringify(item.Amount) instead of .toString() please?

granite token Apr 19, 2023, 11:58 AM

#

frank hamlet <@473374794994417664> could you try using `JSON.stringify(item.Amount)` instead ...

thanks, didn't work as well, same error

#

i'll replicate the app on cloud and invite [email protected]

granite token Apr 19, 2023, 12:24 PM

#

https://app.appsmith.com/app/jspdf-test/page1-643fd7c817a9db4faee9610b

#

just invited support, hope you find the problem, thanks guys

vernal hearthBOT Apr 19, 2023, 12:49 PM

#

Thanks. Give us some time to check this.

vernal hearthBOT Apr 19, 2023, 1:10 PM

#

I have checked the app, and the root cause is that the column names for
formattedData do not match those from Table2.columnOrder (createdDate vs.
Date, netValue vs. Value). If you fix that, it downloads the table.
As for the string values, it works with both toString() or JSON.stringify().
If you wouldn't convert the numbers to strings, it downloads the table but
doesn't include the values.

I created a copy of your page called SUPPORT Page1 Copy, where I fixed it.
Please check and delete the page once you don't need it anymore.

granite token Apr 20, 2023, 12:07 AM

#

I see thank you so much. and sorry for taking too much of your time

vernal hearthBOT Apr 20, 2023, 1:42 PM

#

You’re welcome! We’re happy to help.
Thanks for your continuous support and patience. We hope your issue is resolved
now.

Let us know how we did?
https://survey.frontapp.com/v2/09a400bf433bc9676d67/02bbc63f9b3d8dfd4eb5002efaed5b26

robust forum Sep 12, 2024, 6:37 PM

#

I'm trying to use the above solution.
Converting number to text doesn't work for me.
my code :

what can I do? Can I ask for a correction? I have numbers in the table, not to mention the id.

Second question, can I somehow influence the visibility of the columns? Does it automatically display everything in the table?

#

export default {
genInvoice: async () => {
const doc = await new jspdf.jsPDF();
const formattedData = data_table.tableData.map(item => ({
id:item.id.toString(),

/// Point: item.Point.toString()
}))
doc.text("title", 20, 20);
doc.table(20, 30, data_table.tableData, data_table.columnOrder, {autoSize: true});
await download(doc.output(), "invoice.pdf");

         //await doc.output("dataurlstring");
    },
debug: () => {

return Object.values(data_table.tableData[0]).map(value => typeof value)

}

#

#

vernal hearthBOT Sep 12, 2024, 6:42 PM

#

Hello, I'm AppyHelper, your support bot for Appsmith-related queries!

Regarding your first question about converting numbers to text:

It seems like you're trying to convert number values to strings in your genInvoice function. Your approach is correct, but there might be a syntax or data access issue. Ensure that the data_table.tableData is correctly populated and accessible. Here's a corrected snippet if you're facing issues with specific properties:

export default {
genInvoice: async () => {
const doc = new jspdf.jsPDF();
const formattedData = data_table.tableData.map(item => ({
id: item.id.toString(),
Point: item.Point.toString() // Ensure 'Point' is the correct property name
}));
doc.text("title", 20, 20);
doc.table(20, 30, formattedData, data_table.columnOrder, {autoSize: true}); // Use formattedData here
await download(doc.output(), "invoice.pdf");
},
debug: () => {
return Object.values(data_table.tableData[0]).map(value => typeof value)
}
}

Make sure that the property names like Point match exactly with those in your data source.

Regarding your second question about column visibility in tables:

In Appsmith, you can control the visibility of columns in the Table widget through the widget's properties. Here?s how you can adjust it:

Go to the Table widget properties.
Navigate to the "Columns" section.
For each column, you can toggle the visibility by setting the "Visible" property. You can use static values (true/false) or bind it to a JS expression to dynamically control visibility based on certain conditions.

This setup does not automatically display all columns unless specified in the widget's configuration. You have full control over which columns to display and their respective visibility.

If you need further assistance or have more specific requirements, feel free to ask!

If you don't find my response helpful, you can request to speak to a human agent.

robust forum Sep 12, 2024, 6:53 PM

#

I have... Error: getTextDimensions expects text-parameter to be of type String or type Number or an Array of Strings...

#

The phrase to string doesn't work for me

#

it also seems that hiding a column in the table widget does not hide it in the table generated by skypt to pdf. All are visible in the table.

#jsPDF: getTextDimensions expects text-parameter to be of type String or type Number or an Array of S

Regarding your first question about converting numbers to text:

Regarding your second question about column visibility in tables: