Uncategorized · June 8, 2021

Generate PDF from HTML in VueJS

This solution is work for me with unicode characters.

First, install jsPDF-html2canvas

npm i jspdf-html2canvas  

Then, use it in your Vue component. Below is my simple sample.

<template>
<button @click="download" class="button m-3">Download</button>
  <div id="page">
    <div class="container p-5">
      <h1>BOON PDF</h1>
      <h2>ทดสอบภาษาไทย</h2>
      <table class="table is-bordered is-striped m-5">
        <tr>
          <td>วันจันทร์</td>
          <td>สีเหลือง</td>
        </tr>
        <tr>
          <td>วันอังคาร</td>
          <td>สีชมพู</td>
        </tr>
        <tr>
          <td>พุธ</td>
          <td>สีเขียว</td>
        </tr>
      </table>
    </div>
  </div>
  
</template>

<script>
import html2PDF from 'jspdf-html2canvas';

export default {
    data() {
		return {
			name: 'BOOOOOON'
		}
	},
    methods: {
            download () { 
                let page = document.getElementById('page');
                html2PDF(page, {
                    jsPDF: {
                    format: 'a4',
                    },
                    imageType: 'image/jpeg',
                    output: 'generate.pdf'
                });
            }
        }
}
</script>

<style scoped>
</style>

I hope this will save your dev time.

You can get more information from this link. https://www.npmjs.com/package/jspdf-html2canvas