Generate PDF from HTML in VueJS
June 8, 2021
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