Pdf examples with jsPDF

Hi,
whith a non visula plugin
with

this.getReactWebPackages = function() {
// Return dependencies that need to be included in the exported project’s package.json file.
// Each key is an npm package name that must be imported, and the value is the package version.
//
// Example:
// return { “somepackage”: “^1.2.3” }

return {“jspdf”:"^1.5.3",“jspdf-autotable”:"^3.1.2"}
}

this.writesCustomReactWebComponent = false;

this.getReactWebComponentName = function() {
// Preferred class name for this component.
// The exporter may still need to modify this (e.g. if there already is a component by this name),
// so in the actual export method below, we must use the className value provided as a parameter.
return “testnonvisual”;
}

this.getReactWebImports = function(exporter) {
var arr = [
{ varName : “{jspdf}”, path : “jspdf” } ,{ varName : “{autotable}”, path : “jspdf-autotable” }
];
return arr;
}

and with some js
whe can make pdf reports…

var jsPDF = require(‘jspdf’);
var doc = new jsPDF()
/*
doc.setFontSize(40)
doc.text(35, 25, ‘Rapporto di intervento’)
doc.addImage(imgData, ‘JPEG’, 15, 40, 180, 160)
*/

var doc = new jsPDF();

// From HTML
doc.autoTable({html: '.table'});

// From Javascript
let finalY = doc.previousAutoTable.finalY;
doc.text("Rapporto di servizio", 14, finalY + 15);
doc.autoTable({
    startY: finalY + 20,
    head: [
        ['ID', 'Name', 'Email', 'Country', 'IP-address'],
    ],
    body: [
        ['1', 'Donna', 'dmoore0@furl.net', 'China', '211.56.242.221'],
        ['2', 'Janice', 'jhenry1@theatlantic.com', 'Ukraine', '38.36.7.199'],
        ['3', 'Ruth', 'rwells2@constantcontact.com', 'Trinidad and Tobago', '19.162.133.184'],
        ['4', 'Jason', 'jray3@psu.edu', 'Brazil', '10.68.11.42'],
        ['5', 'Jane', 'jstephens4@go.com', 'United States', '47.32.129.71'],
        ['6', 'Adam', 'anichols5@com.com', 'Canada', '18.186.38.37']
    ],
});

finalY = doc.previousAutoTable.finalY;
doc.text("From HTML with CSS", 14, finalY + 15);
doc.autoTable({
    startY: finalY + 20,
    html: '.table',
    useCss: true,
});

//doc.save(‘a4.pdf’)
window.open(doc.output(‘bloburl’))
//doc.output(‘dataurlnewwindow’);

2 Likes

I am going to recover this because my next goal is to be able to print students reports with the retrieved information from the database.

After the last implementation I know how to create the plugin with the package. What I still need to understand better is how to link the datasheets/dataslots data with a plugin. I have been able to link a dataSlot previously but it was with help and still I need to decipher the procedure.

So I am wondering if I would need to make this data linking between the plugin and datasheet if I want to create a report, or I could just include in the JavaScript code references to a dataslot, to a prop or to a state without necessarily do that process.

I am going to give it a try tomorrow.

Thank you @Paolo_Lops for your tip!

1 Like

I have created the plugin but I don’t know how to proceed to get the pdf. As it is not a visual plugin, should I just placed the plugin anywhere in the screen? And where should I write the code for jasper to create a report?

My scenario is that I have a list where I have students with some data (grades, comments, etc.) and I would like to make a report with this data. Should I create a button and in the interaction I select a script and place the code there? How would make the reference to the student data?

I am assuming that I can make the reference to the data as this.props.studentName and it would be fine? Or maybe I need to tweak the plugin to be linked with the datasheet?

I know they are a lot of questions but kind of lost about how to proceed. Thanks!

Why do you have create a plugin and not use just a non visual plugin to import jspdf and create the report from javascript and save as base64 or print it?

Hey @Paolo_Lops. Thank you for your answer. I thought that I was supposed to create a plugin to make it work. Then what do you mean with a “non visual plugin”? How would I do it?

Go in Plugin Studio, from React Studio
Select npm demo plugin package
and configure jspdf.
then use directly jspdf inside a javascript function!

Thank you for your answer @Paolo_Lops. Ok, I see you are refering to the npm demo plugin package.

Captura de pantalla 2022-01-25 a las 9.32.15

But that package just installs React Player, React Table and TrendGraph. Not sure what you mean about configure jspdf after that.

I am sorry about my clumsiness but I really appreciate your help. Thank you!

I have been re-reading the API documentation and I could see the mention to the non-visual plugin that can be used for elements that don’t need any visual representation on screen (like a music player). However, I couldn’t find a clear explanation about how to implement it. I am sure it is because of my lack of knowledge. I would appreciate some more tips about the appropriate way to get this kind of plugin done, and then how to include it in the project.

@Paolo_Lops mentioned to include the code in a JavaScript function. But where would I place that function? Using the Script editor? Using the interaction for some element like a button? Not sure how to implement it.

Thanks.

It seems that I have found the way. I am pretty sure there are more ways to do it, but I just created the plugin with the packages in “this.getReactWebPackages” and the imports in “this.getReactWebImports” as @Paolo_Lops suggested in the first post. Then I just place the plugin in the screen outside of the view and if I place a button and use the “Script” interaction I can get the button to generate the pdf corresponding to the script.

Additionally it is needed that in the script editor for that script you write the “import jsPDF from ‘jspdf’”. I thought this step wouldn’t be necessary because the plugin should have taken care of it, but it is ok.

Now I am going to implement it in my app to create the report that I want but there is something that probably some of you can help me with. The report is about a student and the grades and comments for each subject. So what I am trying to get is a list (using autotable) with a line for each subject for that particular student.

I know how to make the reference to specific fields like studentName or so with “this.props.studentName”. But how would I do it with the list where the student may have different subjects? I would appreciate some guidance.

Thanks.

Hi, give me some time and I write you some line of code with a loop over a json array and populate the autotable after that I append autotable to the main report

1 Like

No problem! I have already created the template for the report placing the text and images and I could placed some data fields when it comes from dataSlots, but I am not sure how to create the datatables. Just in case it is useful I describe how the setup is:

The report is exported from a screen where I have one dataSheet providing the data. The dataSheet is called “selectedStudentGrades” and it will have the data from several subjects regarding grades and comments. I want to create an autotable which would have a row for each document in the dataSheet (sometimes it will be more or less) populating several fields like “subjectName”, “grade”, “teacherName” and “grade”.

I know I should use a forEach loop but I am not certain how to put everything in place so I will appreciate how to create this table.

Thanks!

An update to this. I have been able to solve it with some help from stackOverflow. As it was particularly a Javascript thing, once the reference to the collection is well done, I just had to use the map() to create the autoTables with the data. I leave here the code just in case it is useful to someone:

var doc = new jsPDF();
const ref = this.context.appActions.getDataSheet(‘selectedDataSheet’);

//I am creating the table using just three of the values from the data fetched from the dataSheet.
doc.autoTable({
head: [[‘Subject’, ‘Teacher’, ‘Achievements’]],
body: Array.from(ref.items).map(({subject, teacherName, achievements}) => {
return [subject, teacherName, achievements];
}),
});

I hope it is useful to someone! Thanks!