├── pdf.js ├── pdf.css └── pdf.html /pdf.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | document.getElementById("download") 3 | .addEventListener("click", () => { 4 | const invoice = this.document.getElementById("invoice"); 5 | console.log(invoice); 6 | console.log(window); 7 | var opt = { 8 | margin: 1, 9 | filename: 'myfile.pdf', 10 | image: { type: 'jpeg', quality: 0.98 }, 11 | html2canvas: { scale: 2 }, 12 | jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } 13 | }; 14 | html2pdf().from(invoice).set(opt).save(); 15 | }) 16 | } -------------------------------------------------------------------------------- /pdf.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 4 | font-size: .8125rem; 5 | font-weight: 400; 6 | line-height: 1.5385; 7 | color: #333; 8 | text-align: left; 9 | background-color: #eee 10 | } 11 | 12 | .mt-50 { 13 | margin-top: 50px 14 | } 15 | 16 | .mb-50 { 17 | margin-bottom: 50px 18 | } 19 | 20 | .card { 21 | position: relative; 22 | display: -ms-flexbox; 23 | display: flex; 24 | -ms-flex-direction: column; 25 | flex-direction: column; 26 | min-width: 0; 27 | word-wrap: break-word; 28 | background-color: #fff; 29 | background-clip: border-box; 30 | border: 1px solid rgba(0, 0, 0, .125); 31 | border-radius: .1875rem 32 | } 33 | 34 | .card-img-actions { 35 | position: relative 36 | } 37 | 38 | .card-body { 39 | -ms-flex: 1 1 auto; 40 | flex: 1 1 auto; 41 | padding: 1.25rem; 42 | text-align: center 43 | } 44 | 45 | .card-title { 46 | margin-top: 10px; 47 | font-size: 17px 48 | } 49 | 50 | .invoice-color { 51 | color: red !important 52 | } 53 | 54 | .card-header { 55 | padding: .9375rem 1.25rem; 56 | margin-bottom: 0; 57 | background-color: rgba(0, 0, 0, .02); 58 | border-bottom: 1px solid rgba(0, 0, 0, .125) 59 | } 60 | 61 | a { 62 | text-decoration: none !important 63 | } 64 | 65 | .btn-light { 66 | color: #333; 67 | background-color: #fafafa; 68 | border-color: #ddd 69 | } 70 | 71 | .header-elements-inline { 72 | display: -ms-flexbox; 73 | display: flex; 74 | -ms-flex-align: center; 75 | align-items: center; 76 | -ms-flex-pack: justify; 77 | justify-content: space-between; 78 | -ms-flex-wrap: nowrap; 79 | flex-wrap: nowrap 80 | } 81 | 82 | @media (min-width: 768px) { 83 | .wmin-md-400 { 84 | min-width: 400px !important 85 | } 86 | } 87 | 88 | .btn-primary { 89 | color: #fff; 90 | background-color: #2196f3 91 | } 92 | 93 | .btn-labeled>b { 94 | position: absolute; 95 | top: -1px; 96 | background-color: blue; 97 | display: block; 98 | line-height: 1; 99 | padding: .62503rem 100 | } -------------------------------------------------------------------------------- /pdf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
Sale invoice
26 |
27 |
28 |
29 |
30 |
31 | 32 |
    33 |
  • 2269 Six Sigma
    • 34 |
  • New york city
    • 35 |
  • +1 474 44737 47
    • 36 |
37 |
38 |
39 |
40 |
41 |
42 |

Invoice #BBB1243

43 |
    44 |
  • Date: March 15, 2020
    • 45 |
  • Due date: March 30, 2020
    • 46 |
47 |
48 |
49 |
50 |
51 |
52 |
Invoice To: 53 |
    54 |
  • 55 |
    Tibco Turang
    56 |
    • 57 |
  • Samantha Mutual funds Ltd
    • 58 |
  • Gurung Street
    • 59 |
  • 23 BB Lane
    • 60 |
  • Hong kong
    • 61 |
  • 234 456 5678
    • 62 |
  • tibco@samantha.com
    • 63 |
64 |
65 |
Payment Details: 66 |
67 |
    68 |
  • 69 |
    Total Due:
    70 |
    • 71 |
  • Bank name:
    • 72 |
  • Country:
    • 73 |
  • City:
    • 74 |
  • Address:
    • 75 |
  • IBAN:
    • 76 |
  • SWIFT code:
    • 77 |
78 |
    79 |
  • 80 |
    $1,090
    81 |
    • 82 |
  • Hong Kong Bank
    • 83 |
  • Hong Kong
    • 84 |
  • Thurnung street, 21
    • 85 |
  • New standard
    • 86 |
  • 98574959485
    • 87 |
  • BHDHD98273BER
    • 88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 110 | 111 | 112 | 113 | 114 | 115 | 119 | 120 | 121 | 122 | 123 | 124 | 128 | 129 | 130 | 131 | 132 | 133 |
DescriptionRateHoursTotal
106 |
Arts and design template
in 107 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 108 | pariatur.Duis aute irure dolor in reprehenderit 109 | 		$120180$300
116 |
Template for desnging the arts
Lorem 117 | ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 118 | 		$140100$240
125 |
Technical support international
Lorem 126 | ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 127 | 		$250$250$500
134 |
135 |
136 |
137 |
138 |
Total due
139 |
140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 155 | 156 | 157 |
Subtotal:$1,090
Tax: (25%)$27
Total: 153 |
$1,160
154 |
158 |
159 |
161 |
162 |
163 |
164 |
Lorem ipsum dolor sit amet, consectetur 165 | adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 166 | ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 167 | consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 168 | fugiat nulla pariatur.Duis aute irure dolor in reprehenderit
169 |
170 |
171 |
172 |
173 | 174 | 175 | --------------------------------------------------------------------------------