57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<template>
|
|
<div class='pdf'>
|
|
<button @click="createPdf">print PDF</button>
|
|
<button @click="createExcel">print EXCEL</button>
|
|
</div>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import jsPDF from 'jspdf';
|
|
import html2canvas from 'html2canvas';
|
|
export default Vue.extend({
|
|
data() {
|
|
return {
|
|
canvasUrl: '' as string,
|
|
};
|
|
},
|
|
methods: {
|
|
createPdf() {
|
|
const elements: any = document.getElementById('order-details');
|
|
html2canvas(elements, {
|
|
scale: 2,
|
|
}).then((canvas: any) => {
|
|
canvas.setAttribute('id', 'canvas');
|
|
document.body.appendChild(canvas);
|
|
const canvasElement: any = document.getElementById('canvas');
|
|
this.canvasUrl = canvasElement.toDataURL();
|
|
const doc = new jsPDF({
|
|
unit: 'cm',
|
|
});
|
|
const canvasHeight = canvasElement.style.height.replace('px', '');
|
|
const height = canvasHeight / window.outerHeight;
|
|
doc.addImage(this.canvasUrl, 'JPEG', 0.5, 0.5, 20, 29 * height);
|
|
doc.save('test' + '.pdf');
|
|
});
|
|
const canvasElementToRemove: any = document.getElementById('canvas');
|
|
canvasElementToRemove.remove();
|
|
},
|
|
createExcel() {
|
|
const tabs = document.getElementsByTagName('table');
|
|
let allElementText: any;
|
|
for (const tab of tabs) {
|
|
let tabText: string = '<table border="2px"><tr>';
|
|
for (const row of tab.rows) {
|
|
tabText += row.innerHTML + '</tr>';
|
|
}
|
|
allElementText += tabText + '</table>';
|
|
}
|
|
window.open(
|
|
'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText),
|
|
);
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|