Project SW Test Forum 12. pdf 파일 출력 기능 구현 - 1

<module-app-web\front\src\components\common\Breadcrumb.vue>

<script>
import {jsPDF} from "jspdf";
import html2canvas from "html2canvas";

export default {
 name: "Breadcrumb",
 components: {},
 props: {
   page: String,
   subPage: String,
   paths: Array,
   title: String,
 },
 setup(props) {
   const printPdf = async () => {
     document.getElementById("loading-wrapper").style.visibility = "visible";
     await createPdf();
     document.getElementById("loading-wrapper").style.visibility = "hidden";
   }

   const createPdf = () => {
     return new Promise((resolve, reject) => {
       html2canvas(document.getElementsByClassName("page-content")[0],
           {
             logging: false,
             allowTaint: true,
             useCORS: true,
             scale: 3   // 기본 해상도 3배 증가
           }
       ).then(canvas => {
         let filename = 'OTA-REPORT_' + Date.now() + '.pdf';
         let doc = new jsPDF('p', 'mm', 'a4');
         let imgData = canvas.toDataURL('image/png');
         let imgWidth = 200; // A4: 210
         let pageHeight = 297; // A4: 297
         let imgHeight = (canvas.height * imgWidth / canvas.width) - 10;
         let heightLeft = imgHeight;
         let position = 10;

         doc.addImage(imgData, 'png', 5, position, imgWidth, imgHeight);
         heightLeft -= pageHeight;

         while (heightLeft >= 0) {
           position = heightLeft - imgHeight + 10;
           doc.addPage();
           doc.addImage(imgData, 'png', 5, position, imgWidth, imgHeight);
           heightLeft -= pageHeight;
         }
         doc.save(props.title);
         resolve(true);
       });
     });
   }

   return {
     // function
     printPdf, isEmpty
   }
 }
}
</script>