VUE는 PDF를 생성

주요 기준

https://blog.csdn.net/qq_37880968/article/details/94626001

모듈을 추가하십시오

NPM 설치 --save html2canvas

NPM 설치 jspdf --save

유틸리티 함수 2. 소개

html2canvas 오기 로부터  ' html2canvas ' ; 
오기 JsPDF 에서  ' jspdf ' ; 

/ * * 
 * @param PDF ELE 수 생성 DOM 소자 (용기) 
 파라미터 : padfName의 PDF 파일의 파일 이름을 생성 한 후 
 * * / 

기능 downloadPDF을 (ELE, pdfName ) { 

    eleW하자 = ele.offsetWidth; // GET 폭 용기를 
    송출 엘레 = ele.offsetHeight; // 높다 컨테이너 얻을 
    송출을 eleOffsetTop = ele.offsetTop;   // 문서에 상단에서 용기를 얻을 
    수 있도록 eleOffsetLeft = ele.offsetLeft는; //은 가장 왼쪽에서 문서에 용기를 얻을 수 

    VAR= document.createElement 캔버스 ( " 캔버스 " );
     var에 ABS = 0 ; 

    win_in 송출 = document.documentElement.clientWidth || document.body.clientWidth; // (스크롤없이) 현재 보이는 창 너비를 얻을 
    송출 win_out = window.innerWidth; // GET 폭 (스크롤 바를 포함하는) 현재 윈도우 

    IF (win_out> win_in) {
         // ABS = (win_o - win_i) / 2]     //는 스크롤 바의 길이의 절반 얻을 
        복근 = (win_out - win_in) / 2 ]     // 스크롤바의 절반 폭 얻기
         // CONSOLE.LOG (a '를 새로운 ABS'); 
    } 
    canvas.width = eleW * 2;     // 캔버스 && 높은 증폭 배 폭 
    canvas.height 엘레 * = 2 ; 

    VAR의 문맥 = canvas.getContext ( " 2D " ) 
    context.scale ( 2 , 2 ) 
    context.translate ( -eleOffsetLeft -abs을 - eleOffsetTop);
     // 없이 스크롤 막대를 가로 방향으로 기본 경우, 차이의 offset.left (), 유무, 스크롤 막대, 그래서 이후
     // 이 차이는 제거해야 할 때 번역 

    // html2canvas을 (요소) 그 때는 ((캔버스) => { // 특정
     // html2canvas (요소 [0])이 다음 ((캔버스) => {. 
    html2canvas (ELE { 
        dpi로 : 300 ,
         //allowTaint이 : 참,   // 그렇지 않으면 toDataURL 데이터에 의한 수출 캔버스 불가능하다, 캔버스 오염, allowTaint 매개 변수를 제거 할 수 
        useCORS : true로   // 외부 캔버스 캔버스에서 이미지를 연결 크로스 도메인 요청을 허용, 크로스 도메인 요청을 할 수 있습니다. 
    }) 그 때는 ((캔버스) => {
         VAR contentWidth = canvas.width;
         VAR contentHeight = canvas.height;
         // PDF 파일 HTML 페이지 표시 생성 캔버스 높이, 
        VAR의 pageHeight = contentWidth / 592.28 * 841.89 ;
         // 아니오 PDF 생성 된 HTML 페이지 높이 
        VAR leftHeight = contentHeight;
         // 페이지 오프셋 
        VAR의 위치 = 0;
         // PDF 파일에의 A4 용지 크기 [595.28,841.89, HTML 페이지 캔버스 생성 이미지의 폭과 높이 
        VAR imgWidth = 595.28 ;
         VAR imgHeight = 595.28 에 / * contentWidth contentHeight;
         VAR PageData = canvas.toDataURL ( " 이미지 / JPEG ' , 1.0 )
         VAR의 PDF는 = 새로운 새 JsPDF ( ' , ' 편 ' , ' A4를 ' );
         // 두 높이, HTML 페이지의 실제 높이 및 PDF 페이지 높이 (841.89)를 생성 구분할 필요가
         / / 표시 범위의 내용은 탭없이 PDF를 초과하지 않을 때, 
        만약(leftHeight < pageHeight) {
             //는 pdf.addImage에서 (pageData 'JPEG', 왼쪽, 위쪽, 폭, 높이)가 배치 된 PDF 표시이다 
            pdf.addImage (PageData, ' JPEG ' , 0 , 0 , imgWidth, imgHeight )
             // pdf.addImage (PageData, '는 JPEG', 20이고, 40 imgWidth, imgHeight) 
        } 다른 {     // 탭 
            그동안 (leftHeight> 0 ) { 
                pdf.addImage (PageData, ' JPEG ' , 0 , 위치 imgWidth, imgHeight) 
                leftHeight - = pageHeight;
                위치 - = 841.89 ;
                 // 빈 페이지를 추가 피하기 위해 
                IF (leftHeight> 0 ) { 
                    pdf.addPage (); 
                } 
            } 
        } 
        // 동적으로 생성 
        pdf.save (pdfName); 
    }) 
} 
내보내기 기본 { 
    downloadPDF 
}

3.이 필요한 문서의 도입

HTML :
 <div ID = " 데모 " > </ div> 
JS : handleDown () { 
        htmlToPdf.downloadPDF (document.querySelector ( ' #demo ' ) " 어플리케이션을 떠나는 ' ) 
      }

물론 최대한 활용 심판의

추천