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