56 lines
1.4 KiB
Vue
56 lines
1.4 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: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
createPdf() {
|
||
|
|
html2canvas(document.getElementById('order-details')).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 height = canvasElement.height / window.outerHeight;
|
||
|
|
doc.addImage(this.canvasUrl, 0.5, 0.5, 20, 29 * height);
|
||
|
|
doc.save('test' + '.pdf');
|
||
|
|
},
|
||
|
|
);
|
||
|
|
},
|
||
|
|
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>
|
||
|
|
|