jsPDF Tutorial to Generate PDF Invoice Template Using jsPDF-Autotable Library Full Example For Beginners

jsPDF Tutorial to Generate PDF Invoice Template Using jsPDF-Autotable Library Full Example For Beginners

 

Welcome folks today in this blog post we will be generating pdf invoice template using jspdf and jspdf-autotable library. All the source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started we need to create a index.html file and copy paste the following code

 

 

index.html

 

 

First of all we need to import the jspdf and jspdf-autotable library cdn as shown below.

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.0-alpha.1/jspdf.plugin.autotable.js"></script>

 

 

And also we need to include jquery cdn as shown below

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

 

Now copy paste the following html code into the file like this

 

 

<table border="1" id="example" class="sfc_table">
  <thead>
    <tr>
      <th>PART NUMBER</th>
      <th>COST</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" class="innerHeader March">March</td>
    </tr>
    <tr>
      <td>ThisEXAMPLE</td>
      <td>£40.00</td>
    </tr>
    <tr>
      <td align="right">Your spend this month:</td>
      <td>£40.00</td>
    </tr>
    <tr class="total">
      <td align="right">Your total spend</td>
      <td>£40.00</td>
    </tr>
  </tbody>
</table>

<div class="grid_24 footer">
  <hr>
  <div class="grid_6 push_18">
    <a class="btn" id="export" href="summary.html">Export</a>
  </div>

</div>

 

 

Now we need to copy the css code as shown below.

 

 

==========================================================================
   base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  background-color: #c00418;
  font-family: "Meta", Helvetica, Arial, sans-serif;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 8px solid #000000;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
  min-width: 1260px;
  min-height: 100vh;
  background-color: rgba(192, 4, 24, 0.8);
}
.container_24 {
  margin-left: auto;
  margin-right: auto;
  width: 1260px;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23 {
  display: inline;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}
.grid_24 {
  display: inline;
  float: left;
  margin-left: 0px;
  margin-right: 0px;
}

.push_1,
.pull_1,
.push_2,
.pull_2,
.push_3,
.pull_3,
.push_4,
.pull_4,
.push_5,
.pull_5,
.push_6,
.pull_6,
.push_7,
.pull_7,
.push_8,
.pull_8,
.push_9,
.pull_9,
.push_10,
.pull_10,
.push_11,
.pull_11,
.push_12,
.pull_12,
.push_13,
.pull_13,
.push_14,
.pull_14,
.push_15,
.pull_15,
.push_16,
.pull_16,
.push_17,
.pull_17,
.push_18,
.pull_18,
.push_19,
.pull_19,
.push_20,
.pull_20,
.push_21,
.pull_21,
.push_22,
.pull_22,
.push_23,
.pull_23 {
  position: relative;
}

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

.container_24 .grid_1 {
  width: 42.5px;
}

.container_24 .grid_2 {
  width: 95px;
}

.container_24 .grid_3 {
  width: 147.5px;
}

.container_24 .grid_4 {
  width: 200px;
}

.container_24 .grid_5 {
  width: 252.5px;
}

.container_24 .grid_6 {
  width: 305px;
}

.container_24 .grid_7 {
  width: 410px;
}

.container_24 .grid_8 {
  width: 410px;
}

.container_24 .grid_9 {
  width: 462.5px;
}

.container_24 .grid_10 {
  width: 515px;
}

.container_24 .grid_11 {
  width: 567.5px;
}

.container_24 .grid_12 {
  width: 620px;
}

.container_24 .grid_13 {
  width: 672.5px;
}

.container_24 .grid_14 {
  width: 725px;
}

.container_24 .grid_15 {
  width: 777.5px;
}

.container_24 .grid_16 {
  width: 830px;
}

.container_24 .grid_17 {
  width: 882.5px;
}

.container_24 .grid_18 {
  width: 935px;
}

.container_24 .grid_19 {
  width: 987.5px;
}

.container_24 .grid_20 {
  width: 1040px;
}

.container_24 .grid_21 {
  width: 1092.5px;
}

.container_24 .grid_22 {
  width: 1145px;
}

.container_24 .grid_23 {
  width: 1197.5px;
}

.container_24 .grid_24 {
  width: 1260px;
}

.container_24 .prefix_1 {
  padding-left: 62.5px;
}

.container_24 .prefix_2 {
  padding-left: 105px;
}

.container_24 .prefix_3 {
  padding-left: 157.5px;
}

.container_24 .prefix_4 {
  padding-left: 210px;
}

.container_24 .prefix_5 {
  padding-left: 262.5px;
}

.container_24 .prefix_6 {
  padding-left: 315px;
}

.container_24 .prefix_7 {
  padding-left: 367.5px;
}

.container_24 .prefix_8 {
  padding-left: 420px;
}

.container_24 .prefix_9 {
  padding-left: 472.5px;
}

.container_24 .prefix_10 {
  padding-left: 525px;
}

.container_24 .prefix_11 {
  padding-left: 577.5px;
}

.container_24 .prefix_12 {
  padding-left: 630px;
}

.container_24 .prefix_13 {
  padding-left: 682.5px;
}

.container_24 .prefix_14 {
  padding-left: 735px;
}

.container_24 .prefix_15 {
  padding-left: 787.5px;
}

.container_24 .prefix_16 {
  padding-left: 840px;
}

.container_24 .prefix_17 {
  padding-left: 892.5px;
}

.container_24 .prefix_18 {
  padding-left: 945px;
}

.container_24 .prefix_19 {
  padding-left: 997.5px;
}

.container_24 .prefix_20 {
  padding-left: 1050px;
}

.container_24 .prefix_21 {
  padding-left: 1102.5px;
}

.container_24 .prefix_22 {
  padding-left: 1155px;
}

.container_24 .prefix_23 {
  padding-left: 1207px;
}

.container_24 .suffix_1 {
  padding-right: 62.5px;
}

.container_24 .suffix_2 {
  padding-right: 105px;
}

.container_24 .suffix_3 {
  padding-right: 157.5px;
}

.container_24 .suffix_4 {
  padding-right: 210px;
}

.container_24 .suffix_5 {
  padding-right: 262.5px;
}

.container_24 .suffix_6 {
  padding-right: 315px;
}

.container_24 .suffix_7 {
  padding-right: 367.5px;
}

.container_24 .suffix_8 {
  padding-right: 420px;
}

.container_24 .suffix_9 {
  padding-right: 472.5px;
}

.container_24 .suffix_10 {
  padding-right: 525px;
}

.container_24 .suffix_11 {
  padding-right: 577.5px;
}

.container_24 .suffix_12 {
  padding-right: 630px;
}

.container_24 .suffix_13 {
  padding-right: 682.5px;
}

.container_24 .suffix_14 {
  padding-right: 735px;
}

.container_24 .suffix_15 {
  padding-right: 787.5px;
}

.container_24 .suffix_16 {
  padding-right: 840px;
}

.container_24 .suffix_17 {
  padding-right: 892.5px;
}

.container_24 .suffix_18 {
  padding-right: 945px;
}

.container_24 .suffix_19 {
  padding-right: 997.5px;
}

.container_24 .suffix_20 {
  padding-right: 1050px;
}

.container_24 .suffix_21 {
  padding-right: 1102.5px;
}

.container_24 .suffix_22 {
  padding-right: 1155px;
}

.container_24 .suffix_23 {
  padding-right: 1207.5px;
}

.container_24 .push_1 {
  left: 62.5px;
}

.container_24 .push_2 {
  left: 105px;
}

.container_24 .push_3 {
  left: 157.5px;
}

.container_24 .push_4 {
  left: 210px;
}

.container_24 .push_5 {
  left: 262.5px;
}

.container_24 .push_6 {
  left: 315px;
}

.container_24 .push_7 {
  left: 367.5px;
}

.container_24 .push_8 {
  left: 420px;
}

.container_24 .push_9 {
  left: 472.5px;
}

.container_24 .push_10 {
  left: 525px;
}

.container_24 .push_11 {
  left: 577.5px;
}

.container_24 .push_12 {
  left: 630px;
}

.container_24 .push_13 {
  left: 682px;
}

.container_24 .push_14 {
  left: 735px;
}

.container_24 .push_15 {
  left: 787.5px;
}

.container_24 .push_16 {
  left: 840px;
}

.container_24 .push_17 {
  left: 892.5px;
}

.container_24 .push_18 {
  left: 945px;
}

.container_24 .push_19 {
  left: 997.5px;
}

.container_24 .push_20 {
  left: 1050px;
}

.container_24 .push_21 {
  left: 1102.5px;
}

.container_24 .push_22 {
  left: 1155px;
}

.container_24 .push_23 {
  left: 1207.5px;
}

.container_24 .pull_1 {
  left: -62.5px;
}

.container_24 .pull_2 {
  left: -105px;
}

.container_24 .pull_3 {
  left: -157.5px;
}

.container_24 .pull_4 {
  left: -210px;
}

.container_24 .pull_5 {
  left: -262.5px;
}

.container_24 .pull_6 {
  left: -315px;
}

.container_24 .pull_7 {
  left: -367.5px;
}

.container_24 .pull_8 {
  left: -420px;
}

.container_24 .pull_9 {
  left: -472.5px;
}

.container_24 .pull_10 {
  left: -525px;
}

.container_24 .pull_11 {
  left: -577.5px;
}

.container_24 .pull_12 {
  left: -630px;
}

.container_24 .pull_13 {
  left: -682.5px;
}

.container_24 .pull_14 {
  left: -735px;
}

.container_24 .pull_15 {
  left: -787.5px;
}

.container_24 .pull_16 {
  left: -840px;
}

.container_24 .pull_17 {
  left: -892.5px;
}

.container_24 .pull_18 {
  left: -945px;
}

.container_24 .pull_19 {
  left: -997.5px;
}

.container_24 .pull_20 {
  left: -1050px;
}

.container_24 .pull_21 {
  left: -1102.5px;
}

.container_24 .pull_22 {
  left: -1155px;
}

.container_24 .pull_23 {
  left: -1207.5px;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_24:after {
  clear: both;
}

.clearfix,
.container_24 {
  zoom: 1;
}
.header {
  height: 150px;
  background-color: #000000;
  color: #fff;
}
.main {
  padding-top: 20px;
}
.footer {
  height: 110px;
}
.space20 {
  padding-top: 20px;
}
table.sfc_table {
  font-family: "Meta", Helvetica, Arial, sans-serif;
  background-color: #eeeeee;
  width: 100%;
  height: 200%;
  text-align: left;
  border-collapse: collapse;
}
table.sfc_table td,
table.sfc_table th {
  padding: 3px 3px;
}
table.sfc_table tbody td {
  font-size: 14px;
}
table.sfc_table tr:nth-child(even) {
  background: #ffffff;
}
table.sfc_table thead {
  background: #000000;
  background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
  background: -webkit-linear-gradient(
    top,
    #404040 0%,
    #191919 66%,
    #000000 100%
  );
  background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
}
table.sfc_table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
td.shipweek,
td.listprice,
td.specialprice,
td.qty,
td.checkbox {
  text-align: center;
}
table.sfc_table tbody tr.total td {
  height: 100px;
  font-size: 20px;
}
label {
  margin-right: 10px;
}
table.sfc_table td.innerHeader {
  padding: 9px;
  color: #fff;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  -webkit-box-shadow: inset 0px -2px 8px 0px rgba(10, 9, 10, 0.59);
  -moz-box-shadow: inset 0px -2px 8px 0px rgba(10, 9, 10, 0.59);
  box-shadow: inset 0px -2px 8px 0px rgba(10, 9, 10, 0.59);
  text-shadow: 2px 4px 4px black;
}
.title {
  float: left;
  margin-bottom: 0;
  color: #fff;
  font-size: 1.3em;
  -webkit-font-smoothing: antialiased;
}
.month {
  color: white;
  text-align: center;
  float: right;
  margin-top: 20px;
  line-height: 30px;
  height: 30px;
  width: 150px;
  -webkit-border-top-left-radius: 25px;
  -webkit-border-top-right-radius: 25px;
  -moz-border-radius-topleft: 25px;
  -moz-border-radius-topright: 25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.jan {
  background-color: #63a8d9;
}
.feb {
  background-color: #fbdf07;
}
.March {
  background-color: #6ed654;
}
.mainHeader {
  color: #fff;
  text-transform: capitalize;
  margin-top: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#dialog-overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 966;
  color: #fff;
  text-align: center;
  font-size: 18px;
  text-shadow: none;
  background: rgba(204, 7, 30, 0.9);
  opacity: 0;
  transition: opacity 0.5s;
  transform: translateZ(0);
}

#dialog-overlay.dialog-closing {
  transition: opacity 0.25s;
}

#dialog-overlay.dialog-visible {
  opacity: 1;
}

#dialog-holder {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 100%;
  z-index: 977;
  cursor: default;
  font-family: "Meta", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}

#dialog-holder.dialog-fixed {
  position: fixed;
  overflow: auto;
}

#dialog-holder #dialog-center {
  width: 100%;
  height: 100%;
  z-index: 999;
  border-spacing: 0px;
  padding: 0px;
  margin: 0px;
}

#dialog-holder #dialog-center td {
  text-align: center;
  vertical-align: middle;
  padding: 5%;
  margin: 0px;
  width: 90%;
  perspective: 1000px;
}

#dialog-holder #dialog-center td .dialog-alert {
  z-index: 999;
  position: relative;
  margin: 0 auto;
  padding: 10px 30px;
  background: #fff;
  z-index: 999;
  max-width: 400px;
  word-break: break-word;
  display: none;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px, rgba(0, 0, 0, 0.2) 0 5px 15px;
  opacity: 0;
  transition: transform 0.5s, opacity 0.45s;
  font-size: 14px;
  color: #666;
}

@keyframes shake {
  20% {
    transform: translateX(-12px) rotateY(-8deg);
  }
  40% {
    transform: translateX(12px) rotateY(8deg);
  }
  60% {
    transform: translateX(-12px) rotateY(-8deg);
  }
  80% {
    transform: translateX(12px) rotateY(8deg);
  }
}

#dialog-holder #dialog-center td .dialog-alert[data-dialog-animation="scale"] {
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

#dialog-holder #dialog-center td .dialog-alert[data-dialog-animation="slide"] {
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#dialog-holder #dialog-center td .dialog-alert.dialog-closing {
  transition: transform 0.25s, opacity 0.2s;
}

#dialog-holder #dialog-center td .dialog-alert.dialog-visible {
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

#dialog-holder #dialog-center td .dialog-alert.dialog-shaking {
  animation: shake 0.5s linear;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-border {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: solid #000 1px;
  z-index: -1;
  border-radius: 5px;
  opacity: 0.2;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-title {
  padding: 20px 5px;
  padding-bottom: 0px;
  line-height: 25px;
  font-size: 24px;
  display: block;
  font-weight: normal;
  color: #555;
  font-weight: 400;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-title:empty {
  padding-top: 0px;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-message {
  padding: 0px 5px;
  padding-top: 20px;
  line-height: 1.444;
  display: block;
  max-width: 370px;
  margin: 0 auto;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-message a {
  color: #007eff;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-message:empty {
  padding-top: 0px;
}

#dialog-holder #dialog-center td .dialog-alert label {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  max-width: 300px;
}

#dialog-holder #dialog-center td .dialog-alert label input {
  box-sizing: border-box;
  padding: 15px 20px;
  border: solid #007eff 2px;
  border-radius: 100px;
  outline: none;
  width: 100%;
  font-size: 14px;
  color: #555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-confirm,
#dialog-holder #dialog-center td .dialog-alert .dialog-cancel {
  display: block;
  margin: 20px auto 10px auto;
  padding: 15px 30px;
  background: #eee;
  cursor: pointer;
  border-radius: 100px;
  font-weight: bold;
  max-width: 240px;
  transition: background 0.25s;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-confirm:hover,
#dialog-holder #dialog-center td .dialog-alert .dialog-cancel:hover {
  background: #e1e1e1;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-confirm:active,
#dialog-holder #dialog-center td .dialog-alert .dialog-cancel:active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

#dialog-holder #dialog-center td .dialog-alert .dialog-confirm.dialog-confirm,
#dialog-holder #dialog-center td .dialog-alert .dialog-cancel.dialog-confirm {
  background: #007eff;
  color: #fff;
  margin-bottom: 20px;
}

#dialog-holder
  #dialog-center
  td
  .dialog-alert
  .dialog-confirm.dialog-confirm:hover,
#dialog-holder
  #dialog-center
  td
  .dialog-alert
  .dialog-cancel.dialog-confirm:hover {
  background: #0071e6;
}

#dialog-holder
  #dialog-center
  td
  .dialog-alert
  .dialog-confirm.dialog-cancel
  + .dialog-confirm,
#dialog-holder
  #dialog-center
  td
  .dialog-alert
  .dialog-cancel.dialog-cancel
  + .dialog-confirm {
  margin-top: 10px;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-close {
  position: absolute;
  top: 15px;
  right: 15px;
  margin-bottom: 20px;
  margin-bottom: -10px;
  cursor: pointer;
  line-height: 10px;
  padding: 5px;
  font-size: 24px;
  opacity: 0.5;
  transition: opacity 0.25s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: translateZ(0px);
}

#dialog-holder #dialog-center td .dialog-alert .dialog-close:hover {
  opacity: 1;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-close:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
}

#dialog-holder #dialog-center td .dialog-alert .dialog-clearFloat {
  clear: both;
  width: 100%;
  height: 1px;
  display: block;
}

.btn {
  display: inline-block;
  background: transparent;
  text-transform: uppercase;
  font-weight: 500;
  font-style: normal;
  font-size: 0.925rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 0;
  padding: 18px 80px 20px;
  transition: all 0.7s ease-out;
  background: linear-gradient(
    270deg,
    rgba(240, 240, 255, 0.8),
    rgba(255, 255, 247, 0.8),
    rgba(68, 65, 65, 0.1),
    rgba(34, 34, 34, 0.1)
  );
  background-position: 1% 50%;
  background-size: 300% 300%;
  text-decoration: none;
  margin: 0.625rem;
  border: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.btn:hover {
  border: 1px solid rgba(25, 25, 24, 0.36);
  color: #b42222;
  background-position: 99% 50%;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

 

See also  jsPDF Vuetify Tutorial to Generate a TAX Salary PDF Invoice in Vue.js and Javascript Full Project For Beginners

 

And now we need to include the javascript code and copy paste the following code

 

 

function generate() {
      var doc = new jsPDF('p', 'pt', 'a4');

      var elem = document.getElementById('example');
      var data = doc.autoTableHtmlToJson(elem);
      doc.autoTable(data.columns, data.rows, {
                tableLineColor: [189, 195, 199],
        tableLineWidth: 0.75,
        styles: {
            font: 'Meta',
            lineColor: [44, 62, 80],
            lineWidth: 0.55
        },
        headerStyles: {
            fillColor: [0, 0, 0],
            fontSize: 11
        },
        bodyStyles: {
            fillColor: [216, 216, 216],
            textColor: 50
        },
        alternateRowStyles: {
            fillColor: [250, 250, 250]
        },
        startY: 100,
        drawRow: function (row, data) {
            // Colspan
            doc.setFontStyle('bold');
            doc.setFontSize(10);
            if ($(row.raw[0]).hasClass("innerHeader")) {
                doc.setTextColor(200, 0, 0);
                doc.setFillColor(110,214,84);
                doc.rect(data.settings.margin.left, row.y, data.table.width, 20, 'F');
                doc.autoTableText("", data.settings.margin.left + data.table.width / 2, row.y + row.height / 2, {
                    halign: 'center',
                    valign: 'middle'
                });
               /*  data.cursor.y += 20; */
            };

            if (row.index % 5 === 0) {
                var posY = row.y + row.height * 6 + data.settings.margin.bottom;
                if (posY > doc.internal.pageSize.height) {
                    data.addPage();
                }
            }
        },
        drawCell: function (cell, data) {
            // Rowspan
            console.log(cell);
            if ($(cell.raw).hasClass("innerHeader")) {
                        doc.setTextColor(200, 0, 0);
                    doc.autoTableText(cell.text + '', data.settings.margin.left + data.table.width / 2, data.row.y + data.row.height / 2, {
                    halign: 'center',
                    valign: 'middle'
                });
                
                return false;
            }
        }
    }); 
     doc.save("table.pdf");
    }

$('#export').click(function (e) {
    e.preventDefault();   
    generate();
});

 

See also  How to Clear or Reset Browser LocalStorage History in Javascript Full Tutorial For Beginners

 

And if you run the index.html file inside the browser you will see the following screenshot

 

 

 

 

 

 

Leave a Reply