eNeza
eNeza
  • 2
  • 78 189
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!
มุมมอง: 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...

ความคิดเห็น

  • @krawzi4254
    @krawzi4254 2 หลายเดือนก่อน

    the only tutorial that worked, thank you!

    • @edisonneza
      @edisonneza 2 หลายเดือนก่อน

      Glad it helped you!

  • @domesan.u1610
    @domesan.u1610 2 หลายเดือนก่อน

    Brother what if I want to do this without using html how to do it?

    • @edisonneza
      @edisonneza 2 หลายเดือนก่อน

      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.

    • @domesan.u1610
      @domesan.u1610 2 หลายเดือนก่อน

      @@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?

    • @edisonneza
      @edisonneza 2 หลายเดือนก่อน

      @@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;

  • @FlutterMelodies
    @FlutterMelodies 3 หลายเดือนก่อน

    Can't more appreciate ❤

  • @user-jw7ej9zu7n
    @user-jw7ej9zu7n 3 หลายเดือนก่อน

    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

    • @edisonneza
      @edisonneza 3 หลายเดือนก่อน

      You can remove all the properties based on your needs.

  • @eliya3424
    @eliya3424 3 หลายเดือนก่อน

    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.

    • @edisonneza
      @edisonneza 3 หลายเดือนก่อน

      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.

    • @edisonneza
      @edisonneza 3 หลายเดือนก่อน

      If any trouble you can send the url

  • @user-vn7su2dj5o
    @user-vn7su2dj5o 4 หลายเดือนก่อน

    How can I generate pdf directly without using button? is there any solution where I can directly generate pdf & save in folder using jquery?

  • @ionalexandrustefan1909
    @ionalexandrustefan1909 4 หลายเดือนก่อน

    Thank you for the help!

  • @jeancomontoya8715
    @jeancomontoya8715 6 หลายเดือนก่อน

    Can I ask something?

    • @edisonneza
      @edisonneza 6 หลายเดือนก่อน

      You could have done it 😊

  • @noxious9886
    @noxious9886 7 หลายเดือนก่อน

    how to remove bar code from bottom

    • @edisonneza
      @edisonneza 6 หลายเดือนก่อน

      I suppose just remove the stamp section in the params object

  • @user-uv9kv4jo6s
    @user-uv9kv4jo6s 8 หลายเดือนก่อน

    How can I add Arabic text to the invoice

    • @edisonneza
      @edisonneza 8 หลายเดือนก่อน

      For the moment it is not possible for Arabic language. It’s related to the jpdf library.

  • @oldaricopigon4225
    @oldaricopigon4225 9 หลายเดือนก่อน

    thanks

  • @TheRealHiro
    @TheRealHiro 11 หลายเดือนก่อน

    hello, im having issues, the total at the bottom is not showing for me. i followed every step on your code

    • @edisonneza
      @edisonneza 11 หลายเดือนก่อน

      Hello, to fix it i would need the parameters object you have created. Maybe you can open a github issue about this.

    • @TheRealHiro
      @TheRealHiro 11 หลายเดือนก่อน

      @@edisonneza im sorry, i used the old version, newest version worked

  • @LeticiaS-Dev
    @LeticiaS-Dev 11 หลายเดือนก่อน

    how can i change the logo?

    • @edisonneza
      @edisonneza 4 หลายเดือนก่อน

      Change it in the params object

  • @user-hd7bf8fy3p
    @user-hd7bf8fy3p 11 หลายเดือนก่อน

    what a foolish video you have made 🥴🥴🥴

  • @sanjitthakuri4381
    @sanjitthakuri4381 ปีที่แล้ว

    It downloads pdf in our system yes, but how can i send the generated PDF (from html) into backend server without downloading

    • @edisonneza
      @edisonneza ปีที่แล้ว

      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.

  • @megasusmegajos4321
    @megasusmegajos4321 ปีที่แล้ว

    How can i change table cells style ? Like First row and first column to be bold or font 14 .

    • @edisonneza
      @edisonneza ปีที่แล้ว

      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.

  • @jdhirhe
    @jdhirhe ปีที่แล้ว

    Not working for hindi font

    • @edisonneza
      @edisonneza ปีที่แล้ว

      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.

  • @rudikpoghosyan4776
    @rudikpoghosyan4776 ปีที่แล้ว

    How can I put my own variables

    • @edisonneza
      @edisonneza ปีที่แล้ว

      In the props objects, instead of hard coding values, try to replace them with your variables!

  • @Kolhv
    @Kolhv ปีที่แล้ว

    Thank you so much! Question, how would I add a custom "product" without the Array.from(Array(10), (item, index) => [] thing to the table?

    • @edisonneza
      @edisonneza ปีที่แล้ว

      Hi, just create an array or use an array object filled with the products. Example: [{id: zxy, name: xyz, …etc}]

    • @mohamedaakhil
      @mohamedaakhil ปีที่แล้ว

      dumbahh

    • @SubcribeWithoutanyvideo-mt4zz
      @SubcribeWithoutanyvideo-mt4zz ปีที่แล้ว

      @@mohamedaakhil yooo

  • @themanwithaharmonica9328
    @themanwithaharmonica9328 ปีที่แล้ว

    Do you have any idea how I can get the pdf document to support arabic?

    • @edisonneza
      @edisonneza ปีที่แล้ว

      I’m sorry, for the moment can’t be possible. I have tried some methods but seems that jsPDF library isn’t supporting either.

    • @themanwithaharmonica9328
      @themanwithaharmonica9328 ปีที่แล้ว

      @eNeza Okay, thank you regardless

  • @steilebriese759
    @steilebriese759 ปีที่แล้ว

    thanks!

  • @smpharmasmpharma
    @smpharmasmpharma ปีที่แล้ว

    Hello, I would like to know how I can center the text of a column

    • @edisonneza
      @edisonneza 3 หลายเดือนก่อน

      For the moment not possible. Will be added soon

  • @sorknerl
    @sorknerl ปีที่แล้ว

    Is it possible to style the table with CSS? And how do I add simple text above the table?

    • @edisonneza
      @edisonneza ปีที่แล้ว

      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

    • @ImJuned09
      @ImJuned09 ปีที่แล้ว

      Use inline css it should work

  • @zanispleve1777
    @zanispleve1777 ปีที่แล้ว

    Where did you created template?

    • @edisonneza
      @edisonneza ปีที่แล้ว

      Olympus Mons 😉

    • @zanispleve1777
      @zanispleve1777 ปีที่แล้ว

      @@edisonneza it founds only volcano on mars 😀

    • @edisonneza
      @edisonneza ปีที่แล้ว

      @@zanispleve1777 😂😂 I didn’t get the question

    • @zanispleve1777
      @zanispleve1777 ปีที่แล้ว

      @@edisonneza So this template are great. But i want to create my template. Do you know where to create it?

    • @edisonneza
      @edisonneza ปีที่แล้ว

      @@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.

  • @brianevans4
    @brianevans4 ปีที่แล้ว

    Uses invoice template. Not generally applicable to creating pdfs

  • @alexanamelean
    @alexanamelean ปีที่แล้ว

    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?

    • @edisonneza
      @edisonneza ปีที่แล้ว

      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!

  • @chunchun_zip
    @chunchun_zip ปีที่แล้ว

    is there any way to run this, because the function doesn't work on me(via cdn link)

    • @edisonneza
      @edisonneza ปีที่แล้ว

      Are u sure u have setup correcty? Can u send us an example? Or better create a github issue?

    • @chunchun_zip
      @chunchun_zip ปีที่แล้ว

      @@edisonneza oh I already fixed the issue thanks btw

  • @naziruadam3950
    @naziruadam3950 ปีที่แล้ว

    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.

    • @edisonneza
      @edisonneza ปีที่แล้ว

      Thanks man! Glad it helped you!

  • @emilianovillarreal1744
    @emilianovillarreal1744 ปีที่แล้ว

    Hi! I've been running into the following error: Error: Incomplete or corrupt PNG file. Does anyone know how to fix that???

    • @edisonneza
      @edisonneza ปีที่แล้ว

      Please open an github issue with reproducible steps.

  • @rayanx95
    @rayanx95 ปีที่แล้ว

    I tried to change the logo src but I couldn't every time i changed it, the generator stopped working. any solution?

    • @edisonneza
      @edisonneza ปีที่แล้ว

      Any console error? Create a github issue please with the error message

  • @emanuel81111
    @emanuel81111 2 ปีที่แล้ว

    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

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      😂😂 for basic usage you are right my friend

  • @Dr.UdaraSenarathne
    @Dr.UdaraSenarathne 2 ปีที่แล้ว

    Thank you very much!

  • @kacperkepinski4990
    @kacperkepinski4990 2 ปีที่แล้ว

    generate from what...

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      From whatever you want :D

  • @carlogarcenila8040
    @carlogarcenila8040 2 ปีที่แล้ว

    HI HOW CAN I PUT MY HTML IN INVOICE 2021

    • @carlogarcenila8040
      @carlogarcenila8040 2 ปีที่แล้ว

      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

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      Unfortunately you cannot work with html in this template.

  • @aretisrihari6878
    @aretisrihari6878 2 ปีที่แล้ว

    Does it support Arabic language ?

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      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.

  • @Akephalos204
    @Akephalos204 2 ปีที่แล้ว

    Nice !!!!!!! And thanks

  • @brianochieng6982
    @brianochieng6982 2 ปีที่แล้ว

    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

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      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.

  • @remmanemohamed7120
    @remmanemohamed7120 2 ปีที่แล้ว

    Great video but How I can the change the size and the data inside the table using external variables

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      Sorry man, i don't get it. Can you be more specific?

    • @remmanemohamed7120
      @remmanemohamed7120 2 ปีที่แล้ว

      I mean when I try to put a my variables inside the object like it will give me undefine

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      ​@@remmanemohamed7120 a bit strange. Are you sure your variables are defined? Be careful for case sensitive variables. Let me know if still error.

    • @remmanemohamed7120
      @remmanemohamed7120 2 ปีที่แล้ว

      @@edisonneza no I fixed the error thank you for your intention

    • @juancampos13
      @juancampos13 ปีที่แล้ว

      @@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.

  • @morfioss3974
    @morfioss3974 2 ปีที่แล้ว

    how can i use this with angular 10 please

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      What type of error do u have? Can u make a try with version 1.3.1 please?

    • @morfioss3974
      @morfioss3974 2 ปีที่แล้ว

      @@edisonneza in this line itvar pdfObject = jsPDFInvoiceTemplate.default(props); i get that defaut is not a known element of props

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      @@morfioss3974 how did you pass the props object?

  • @98cintya
    @98cintya 2 ปีที่แล้ว

    how can i center the title header? thanks

    • @edisonneza
      @edisonneza ปีที่แล้ว

      At the moment it’s not possible. Working in a feature like this.

  • @adamfakrullah207
    @adamfakrullah207 2 ปีที่แล้ว

    Why it cannot translate to Japanese language?

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      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

  • @amazecreations1853
    @amazecreations1853 2 ปีที่แล้ว

    Thanks man

  • @mrwho7382
    @mrwho7382 2 ปีที่แล้ว

    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 ?

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      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

    • @mrwho7382
      @mrwho7382 2 ปีที่แล้ว

      @@edisonneza Thanks man, how can I open in new window but with custom sizes lika a popup...i was trying using window.open()...

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      @@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

  • @mrwho7382
    @mrwho7382 2 ปีที่แล้ว

    th-cam.com/video/GbZa9s9Siss/w-d-xo.html HERE the explanation !

  • @nileshsargar1225
    @nileshsargar1225 2 ปีที่แล้ว

    getting error for angular 13, does this library also give support to angular 13 ? or is ther any solution?

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      Take a look at the latest version!

  • @dimasnugroho9996
    @dimasnugroho9996 2 ปีที่แล้ว

    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

    • @edisonneza
      @edisonneza 2 ปีที่แล้ว

      Take a look at the latest version!

  • @hegelmotokoua
    @hegelmotokoua 2 ปีที่แล้ว

    Super video !

  • @bobyuwono6063
    @bobyuwono6063 3 ปีที่แล้ว

    I just came across in the right time. Thanks for making the library, Sir