<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>

