![eNeza](/img/default-banner.jpg)
- 2
- 78 189
eNeza
เข้าร่วมเมื่อ 22 พ.ค. 2021
How to create PDF file in less than 5 min using Javascript
In this video you will see how to create a PDF invoice template in less than 5 minutes, using my Javascript library named "jspdf-invoice-template".
You will find it in npmjs or the source code in github:
- www.npmjs.com/package/jspdf-invoice-template
- github.com/edisonneza/jspdf-invoice-template
Play with it:
- edisonneza.github.io/jspdf-invoice-template
**Sorry for my wild dog. I couldn't stop him 😣
Any Star or Contribution to the package is welcome!
Thank you!
You will find it in npmjs or the source code in github:
- www.npmjs.com/package/jspdf-invoice-template
- github.com/edisonneza/jspdf-invoice-template
Play with it:
- edisonneza.github.io/jspdf-invoice-template
**Sorry for my wild dog. I couldn't stop him 😣
Any Star or Contribution to the package is welcome!
Thank you!
มุมมอง: 70 737
วีดีโอ
Create PDF Invoices using Javascript and jspdf-invoice-template library.
มุมมอง 7K3 ปีที่แล้ว
How to create PDF Invoices using Javascript and jspdf-invoice-template library. PDF template created to generate invoices based on props object. Using jsPDF library. All this code works by using an object as a parameter for the function. All properties are optional and you can add them as an empty string or just remove them from the prop object if you want to display nothing. Also, it can be us...
the only tutorial that worked, thank you!
Glad it helped you!
Brother what if I want to do this without using html how to do it?
What do you mean without using html? You want to include it in a react/angular code? If yes, just install the package from npm and import it. Anyway asap, i will publish a video on that as well.
@@edisonneza without html means i am doing content script for creating extension. So I cant insert scripts into webpages but also i need external libraries which have to be imported how to do?
@@domesan.u1610 if the script is in javascript/typescript you can import it. Open a github issue pls, providing some code examples, so i can help you;
Can't more appreciate ❤
I want to print a specific text PDF, not the full page, meaning part of the text or a report. Depending on what I want to print
You can remove all the properties based on your needs.
Love it! What is the best way to populate each row with info taken from user input? I created a Point-Of-Sale page that allows the user to select an item, specify qty and price, then add to cart. I have all the data stored in an array and use that array to dynamically update the cart display on the page. Can I use that array to populate the invoice rows? I can upload the link to my github repo.
Yes, exactly. For sure you can store are the needed info in a array of object and then just pass it to the object parameter of the template.
If any trouble you can send the url
How can I generate pdf directly without using button? is there any solution where I can directly generate pdf & save in folder using jquery?
Thank you for the help!
Can I ask something?
You could have done it 😊
how to remove bar code from bottom
I suppose just remove the stamp section in the params object
How can I add Arabic text to the invoice
For the moment it is not possible for Arabic language. It’s related to the jpdf library.
thanks
hello, im having issues, the total at the bottom is not showing for me. i followed every step on your code
Hello, to fix it i would need the parameters object you have created. Maybe you can open a github issue about this.
@@edisonneza im sorry, i used the old version, newest version worked
how can i change the logo?
Change it in the params object
what a foolish video you have made 🥴🥴🥴
It downloads pdf in our system yes, but how can i send the generated PDF (from html) into backend server without downloading
This is a question done even before. Please check the other comments and/or the GitHub issues. You will find the solution i think by sending the blob to the server and saving it in your server storage.
How can i change table cells style ? Like First row and first column to be bold or font 14 .
For the moment is supported just the width style for header cells. Please open an issue on Github so i will try to add it as soon as i can.
Not working for hindi font
You’re right. There is a problem with some fonts with special chars. Have to make a lot o checks and tests in order to fix it.
How can I put my own variables
In the props objects, instead of hard coding values, try to replace them with your variables!
Thank you so much! Question, how would I add a custom "product" without the Array.from(Array(10), (item, index) => [] thing to the table?
Hi, just create an array or use an array object filled with the products. Example: [{id: zxy, name: xyz, …etc}]
dumbahh
@@mohamedaakhil yooo
Do you have any idea how I can get the pdf document to support arabic?
I’m sorry, for the moment can’t be possible. I have tried some methods but seems that jsPDF library isn’t supporting either.
@eNeza Okay, thank you regardless
thanks!
Hello, I would like to know how I can center the text of a column
For the moment not possible. Will be added soon
Is it possible to style the table with CSS? And how do I add simple text above the table?
For the moment you can’t do that. If u want to add something that is not implemented in the template, just fork the projekt and make the specific things
Use inline css it should work
Where did you created template?
Olympus Mons 😉
@@edisonneza it founds only volcano on mars 😀
@@zanispleve1777 😂😂 I didn’t get the question
@@edisonneza So this template are great. But i want to create my template. Do you know where to create it?
@@zanispleve1777 it’s a bit tricky to explain here, but you can see a video tutorial or read any blog post about it. Or see the code i have in the main branch and try to replicate it.
Uses invoice template. Not generally applicable to creating pdfs
Hello, sorry for my bad english. I have tried to place an array (var customers = <?php echo json_encode($result) ?>; Array.from(customers).forEach(function(customer) { console.log([customer.Amount_kg, customer.Description, customer.Price_unit_kg, customer.Amount_kg, customer.Total_$, customer.Total_BsD,]); });) in the table field of the template and for more attempts, it does not work. could you help me?
Seems to be too little info. Can you please show the error you get in the console? Are u sure you are properly converting the php result into a correct array? For more please create a new github issue for this kind of error by providing more info. Thanks!
is there any way to run this, because the function doesn't work on me(via cdn link)
Are u sure u have setup correcty? Can u send us an example? Or better create a github issue?
@@edisonneza oh I already fixed the issue thanks btw
I tested many examples and watched many tutorials, but yours is the one that actually worked for me. Also, when I visited the npm website, I could find the unpkg and the example links. I had to type the URL in your example in the address bar manually to get it. The updated version on the website doesn't give such an in-depth sample, or at least I could find where it was. Thanks for the tut.
Thanks man! Glad it helped you!
Hi! I've been running into the following error: Error: Incomplete or corrupt PNG file. Does anyone know how to fix that???
Please open an github issue with reproducible steps.
I tried to change the logo src but I couldn't every time i changed it, the generator stopped working. any solution?
Any console error? Create a github issue please with the error message
Thank you so much , this is 1000x better than all those fucking libraries like dinkToPDF or ironPDF , those fucking libraries takes hours to set it up and you have to do so much esoteric coding for it to work ,its so fucking annoying, but this way is the best
😂😂 for basic usage you are right my friend
Thank you very much!
generate from what...
From whatever you want :D
HI HOW CAN I PUT MY HTML IN INVOICE 2021
ONLY THIS ARE WORKING logo: { src: "raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/logo.png", type: 'PNG', //optional, when src= data:uri (nodejs case) width: 53.33, //aspect ratio = width/height height: 26.66, margin: { top: 0, //negative or positive num, from the current position left: 0 //negative or positive num, from the current position } }, HOW CAN I PUT MY STYLE AND DIV AND CONTENT
Unfortunately you cannot work with html in this template.
Does it support Arabic language ?
Unfortunately it doesn't work. I have tried some ways but it will show just some chars. It's an issue with the jspdf library.
Nice !!!!!!! And thanks
how can i do this with vue.js , as i call data from an SQL Database . Because when i load the data into console it fetches but i dont know how to put it in a receipt
Map the response you get to the props object for the pdf template library. Take a look at the readme file in order to understand better. Feel free to create an issue with more detailed info so I can help you specifically.
Great video but How I can the change the size and the data inside the table using external variables
Sorry man, i don't get it. Can you be more specific?
I mean when I try to put a my variables inside the object like it will give me undefine
@@remmanemohamed7120 a bit strange. Are you sure your variables are defined? Be careful for case sensitive variables. Let me know if still error.
@@edisonneza no I fixed the error thank you for your intention
@@remmanemohamed7120 Could you please tell me how did you fix it? When I try to put my external variables it shows me the UNDEFINED as well and I been trying to fix it but I don´t really know how to do it.
how can i use this with angular 10 please
What type of error do u have? Can u make a try with version 1.3.1 please?
@@edisonneza in this line itvar pdfObject = jsPDFInvoiceTemplate.default(props); i get that defaut is not a known element of props
@@morfioss3974 how did you pass the props object?
how can i center the title header? thanks
At the moment it’s not possible. Working in a feature like this.
Why it cannot translate to Japanese language?
Japanase uses a different font family. I've tried some tests in order to update the package but with some words does work, with some others not, as u can see the following github issue. At this point can't do anything to support it. github.com/edisonneza/jspdf-invoice-template/issues/20
Thanks man
THANK YOU SIR YOU ARE A GENIUS... I WAS STUCK ALMOST 2 WEEKS TRYING TO GENERATE MY INVOICE ... NOW FINALLY I FINISH.... DO YOU KNOW HOW CAN I DO INSTEAD OF DOWNLOAD... RENDER IN A NEW BROWSER WINDOW ?
Thank you man, glad that it helped you! About your question, u can see the output object here: github.com/edisonneza/jspdf-invoice-template/blob/main/src/index.js Specifically what u need is this output type: dataurlnewwindow
@@edisonneza Thanks man, how can I open in new window but with custom sizes lika a popup...i was trying using window.open()...
@@mrwho7382 I think you can output it as a blob type and try to open it in a new browser windows with custom size passing it as a blob URL. Just a sample: stackoverflow.com/questions/21729451/pdf-blob-pop-up-window-not-showing-content
th-cam.com/video/GbZa9s9Siss/w-d-xo.html HERE the explanation !
getting error for angular 13, does this library also give support to angular 13 ? or is ther any solution?
Take a look at the latest version!
hello, i got problem when i try to used it and build with my next js like this Cannot read property 'bind' of undefined any suggest for solving this. thanks
Take a look at the latest version!
Super video !
I just came across in the right time. Thanks for making the library, Sir