[PHP]Laravel-04 HtmlTOPDF

html을 pdf로 convert 해서 다운로드

1. Vue Template

<template>
    <div ref="pdfarea" class="mt-3 mb-3">
      // 여기에는 내가 pdf안에 넣고 싶은 내용들 태그
    <b-button @click="exportToPDF()">PDF 다운로드</b-button>
</div>
</template>

2. Vue Script

<script>
import html2pdf from 'html2pdf.js';

export default {
  data() {
    return {
      created_date : new Date().toLocaleDateString("en-us", {
                      weekday: "long",
                      year: "numeric",
                      month: "short",
                      day: "numeric",
                    })
    };
  },
  methods: {
    exportToPDF () {
      alert("PDF 다운로드를 시작하겠습니다")
      //window.scrollTo(0, 0);
      // 아래 html2canvas 옵션에서 scrollY를 0을 주면 window.scrollTo(0,0)을 안줘도 된다.
      html2pdf(this.$refs.pdfarea, {
          margin: 5,
        //좌우 마진 얼마나 주고 싶은지
          filename: '월간통계' + '_' + this.created_date + '보고서.pdf',
        //파일 이름 써주고
          image: {type:"jpg", quality: 0.98},
        //이미지 타입과 품질
          html2canvas: {
            //allowTaint를 false로 주면, useCORS를 true로 줘야한다.
            useCORS : true, 
            scrollY: 0,
            scale:2, 
            dpi: 300, 
            letterRendering: true,
            allowTaint : false,
              ignoreElements : function( element  ) {	//pdf에 출력하지 않아야할 dom이 있다면 해당 옵션 사용
                    if( element.id == "pdf-button-area" && element.id == "pdf-input-area" ) {
                        return true;
                    }
                }
          },
        // 'p'는 portrait, landscape 옵션도 있다. unit단위는 mm,cm...등등, size format은 나는 b4, html2pdf.js안에 들어가보면 설명이 잘 되어있다.
          jsPDF: {orientation: 'p', unit: 'mm', format: 'b4', compressPDF: true}
      })
    },
  }
</script>

https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
여기는 html2pdf 옵션
https://github.com/eKoopmans/html2pdf.js#options
여기는 html2pdf.js 옵션
https://html2canvas.hertzen.com/configuration
여기는 html2canvas옵션