ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2021
- 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-i...
- github.com/edisonneza/jspdf-i...
Play with it:
- edisonneza.github.io/jspdf-in...
**Sorry for my wild dog. I couldn't stop him 😣
Any Star or Contribution to the package is welcome!
Thank you! - วิทยาศาสตร์และเทคโนโลยี
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!
Thank you for the help!
the only tutorial that worked, thank you!
Glad it helped you!
Thank you very much!
Nice !!!!!!! And thanks
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
How can I generate pdf directly without using button? is there any solution where I can directly generate pdf & save in folder using jquery?
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.
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
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
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.
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
thanks
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
Uses invoice template. Not generally applicable to creating pdfs
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
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.
Hello, sorry for my bad english. I have tried to place an array (var customers = ;
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!
how can i center the title header? thanks
At the moment it’s not possible. Working in a feature like this.
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
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.
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
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
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 put my own variables
In the props objects, instead of hard coding values, try to replace them with your variables!
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.
how can i change the logo?
Change it in the params object
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;
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.
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.
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.
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.
Can I ask something?
You could have done it 😊