空境界

<template>
   <div>
      <b-col cols="6">
         <b-button
            variant="primary"
            @click="pdfExport"
         >
            <i class="fa fa-file-pdf-o"></i>
            &nbsp;
            Export PDF
         </b-button>
      </b-col>
   </div>
</template>

<script lang="ts">

// PDF
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

@Component({
   components: {},
})
export default class pdfExport extends Vue {

   //////////////////// PDF Export ////////////////////
   private pdfExport() {
      const title = `Export PDF`;
      this.pdfSave(title);
   }

   pdfSave(fileName: string) {
      // (document.querySelector('class name' )，可以換成  document.getElementById('id name' )
      // 被選取的 class name 或 id name 就會是 pdf生成的範圍
      html2Canvas(document.querySelector('.container-fluid'), {
         allowTaint: true,
         useCORS: true,
      }).then(function(canvas) {
         let contentWidth = canvas.width;
         let contentHeight = canvas.height;
         let pageHeight = (contentWidth / 592.28) * 841.89;
         let leftHeight = contentHeight;
         let position = 0;
         const imgWidth = 595.28;
         let imgHeight = (592.28 / contentWidth) * contentHeight;
         let pageData = canvas.toDataURL('image/jpeg', 1.0);
         let PDF = new JsPDF('', 'pt', 'a4');
         if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 10, imgWidth, imgHeight);
         } else {
            while (leftHeight > 0) {
               PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
               leftHeight -= pageHeight;
               position -= 841.89;
               if (leftHeight > 0) {
                  PDF.addPage();
               }
            }
         }
         PDF.save(fileName + '.pdf');
      });
   }


}
</script>

<style lang="scss" scoped>
</style>