Alligator's hunter way to print PDF on the client-side
Tags: vue, javascript, todayilearned, todayisearched
Published: 2019-10-18 21:45:51

## Introduction 

  ![](https://media2.giphy.com/media/h1CDndR4kA7Ly/giphy.gif?cid=790b7611744da1d4263d1e03340bdede3cfa7c63eae114d3&rid=giphy.gif)
I am working on a project in **Vue**, from which came the need to generate a client-side pdf, so after some research I discovered these two ways, which I found more comfortable, one of them uses a **npm module** and the other is root style with the **window object**.


  
## Lets go to what matters 
![](https://media1.giphy.com/media/igXb2Ywy5mUfu/giphy.gif?cid=790b76110eee2f3049a0a66dc67fd705d88bac00245fe615&rid=giphy.gif)
  
Assuming we have a component with a stylized table by [boostrap]([https://getbootstrap.com/docs/4.3/content/tables/](https://getbootstrap.com/docs/4.3/content/tables/)):
```vue
<template>
	<table class="table-striped">
		<thead>
			<tr>
				<td colspan="10"> My action table </td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td> Jump </td>
				<td> Wash the dishes </td>
				<td> Fix the computer</td>
			</tr>
		</tbody>
	</table>
</template>
<script>
	import './index.css'
	export default{
		methods: {
			generatePDF(){
				...our solution goes here
			}
		}
	}
</script>

```

![](https://media3.giphy.com/media/4i0ZyQZcXZVLO/200.webp?cid=790b761180717dc626c158dc8a44968d7483500a78d4d947&rid=200.webp)

### First Solution - NPM MODULE 
For this we need to install the module [**jsPDF**]([https://www.npmjs.com/package/jspdf](https://www.npmjs.com/package/jspdf)), and [**html2canvas**](https://www.npmjs.com/package/html2canvas) as a dependecy.

**NPM**
  
      npm i --save jspdf html2canvas

**YARN**

    yarn add jspdf html2canvas

#### Applying the solution on the method generatePdf():
**html2canvas** *is not explicitly depended* on the **jsPDF** documentation to generate the pdf, because it converts our node element into a canvas and then generates the pdf for download, but also the possibility of adding a text, an image, you can see more [here](https://rawgit.com/MrRio/jsPDF/master/docs/) in jsPDF full documentation.
```vue
//...previous stuffs of the component
<script>
	import './index.css'
	import * as jsPDF from 'jspdf'
	import html2canvas from 'html2canvas'
	export default{
		methods: {
			generatePDF(){
				window.html2canvas = html2canvas
				let table = document.querySelector('table')
				const doc =  new jsPDF(); doc.html(table,{ 
					callback: doc => { 
						doc.save('MyPdf.pdf') 
					}
				}
			}
		}
	}
</script>
```

### Last Solution
  
This is the simplest and purest way to print, but it is a bit more work, since to get the *background-color* of an element you need to implement a *polyfill* with **media query**, because **print()** doesn't supports *background-color* 😅

Let's suppose you also have some element **you don't want to appear in your print,** you can set it to *display none* only when printing.

In your **css** or **scss** you need to add if you want a background-color in some element:
```css
@media  print {
	thead{
		box-shadow:  inset  0  0  0  1000px  #b9d1ea  !important;
	}
	someElement{
		display:none;
	}
}

```
In your **script**:
```vue
//...previous stuffs of the component
<script>
	import './index.css'
	export default{
		methods: {
			generatePDF(){
				window.print() //simple like that
			}
		}
	}
</script>
```
The **print()** method prints the contents of the current window.

The **print()** method opens the *Print Dialog Box*, which lets the user to select preferred printing options.

  ![](https://media1.giphy.com/media/X9DzNYYNJnBLi/giphy.gif?cid=790b7611a4ab4c15add9cbde71aab3453347a9b449a00f6d&rid=giphy.gif)
#### I hope this post helps you in your daily endeavor, for today is only and until the next 🍻
![](https://media3.giphy.com/media/KTId7z9JsVZks/giphy.webp?cid=790b761180717dc626c158dc8a44968d7483500a78d4d947&rid=giphy.webp)