vue 프로젝트에서 pdf 형식으로 내보내기

npm i html2canvas  --save-dev
npm i jspdf--save-dev

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
/**
 * @param  ele              pdf  DOM  （  ）
 * @param  padfName     PDF          
 * */
function downloadPDF(ele, pdfName){
    let eleW = ele.offsetWidth;//        
    let eleH = ele.offsetHeight;//        
    let eleOffsetTop = ele.offsetTop;  //              
    let eleOffsetLeft = ele.offsetLeft; //              
    var canvas = document.createElement("canvas");
    var abs = 0;
    let win_in = document.documentElement.clientWidth || document.body.clientWidth; //            （      ）
    let win_out = window.innerWidth; //          （     ）

    if(win_out>win_in){
        // abs = (win_o - win_i)/2;    //           
        abs = (win_out - win_in)/2;    //           
        // console.log(a, ' abs');
    }
    canvas.width = eleW * 2;    //     &&     
    canvas.height = eleH * 2;
    var context = canvas.getContext("2d");

    context.scale(2, 2);

    context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
    //               ，  offset.left(),            ，  
    // translate   ，        

    // html2canvas(element).then( (canvas)=>{ //  
    // html2canvas(element[0]).then( (canvas)=>{
    html2canvas( ele, {
        dpi: 300,
        // allowTaint: true,  //   canvas   ， allowTaint     ，       toDataURL  canvas   
        useCORS:true  //  canvas                ,       。
    } ).then( (canvas)=>{

        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //  pdf  html     canvas  ;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //   pdf html    
        var leftHeight = contentHeight;
        //    
        var position = 0;
        //a4    [595.28,841.89]，html     canvas pdf      
        var imgWidth = 595.28;
        var imgHeight = 595.28/contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new JsPDF('', 'pt', 'a4');

        //         ，   html       ，   pdf     (841.89)
        //      pdf       ，    
        if (leftHeight < pageHeight) {
            // pdf.addImage(pageData, 'JPEG',  ， ，  ，  )   pdf   ；
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            // pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfName);
    })
}
export default {
    downloadPDF
}

import htmlToPdf from 'yourPath /htmlToPdf';

 handleDown(){
 	//  PDF
    htmlToPdf.downloadPDF( document.querySelector('#demo'),'  PDF');
},