ReactJS에서 PDF 작성

ReactJS 출력 (시각적 보고서 등 포함)을 PDF 파일로 저장하려고합니다.ReactJS에서 PDF 작성

html2canvas을 사용하여 스크린 샷을 찍은 다음 jspdf을 사용하여 PDF로 변환했습니다. 그러나 문제는 화면 크기가 줄어든 (또는 모바일보기에서) 경우에도 DOM 스타일을 사용하므로 스크린 샷이 작은 크기 일 때입니다. 따라서 전체보기에서 볼 수 있듯이 PDF가 제대로 생성되지 않습니다.

출처

2017-12-27 Yog

dom-to-png 플러그인을 npm으로 사용하여 이미지를 만든 다음 해당 이미지를 PDF 파일에 넣을 수 있습니다. id

<html> 
<body> 
<div id="print"> 
{Whatever you want to print} 
</div> 
</body> 
</html>

JS 사용이

export function printDetails(ref, fileName: string) { 
    const pdf = new jsPDF('p', 'mm', 'a4'); 
    let height = pdf.internal.pageSize.height; 
    let pageHeightInPixels = ref.clientHeight; 
    let pageHeightInMM = pageHeightInPixels/3.78; 
    let pages = pageHeightInMM/height; 
    const roundOff = Number(pages.toString().split('.')[1].substring(0, 1)); 
    const pageNo = (roundOff > 0 ? pages + 1 : pages); 
    let pageCount = pages < 1 ? 1 : Math.trunc(pageNo); 
    let imageHeight = height; 
    domtoimage.toPng(ref, { 
     height: ref.clientHeight, 
     width: 665, 
     style: { 
      transform: 'unset', 
      left: '0%', 
      margin: 'unset', 
      backgroundColor: 'white', 
      maxHeight: '100%' 
     }, 
    }) 
     .then(function (dataURL) { 
      hidePrintPreviewModal(); 
      for (let i = 1; i <= pageCount; i++) { 
       let pdfStartingHeight = height * (i - 1); 
       pdf.addImage(dataURL, 'JPEG', 30, -pdfStartingHeight, 160, ref.clientHeight); 
       if (i < pageCount) { 
        pdf.addPage(); 
       } 
      } 
      pdf.save(`${fileName}.pdf`); 
     }).catch(function (error) { 
      console.error('oops, something went wrong!', error); 
     }); 
}

등

: 사용

const ref = document.getElementById('print'); 
printDetails(ref, 'test')

을 ref

class Demo extends React.Component { 

    refValue; 

    printData =() => { 
     const node = React.findDOMNode(this.refValue) 
     printDetails(node, 'test'); 
    } 

    render() { 
     return (
      <div ref={(value) => { this.refValue = value }}> 
       {Whatever you want to print} 
    <button onClick={this.printData}>PRint</button> 
      </div> 

     ) 
    } 
}

이 기능은 dom에서 png 및 jspdf를 사용하여 파일을 인쇄합니다. 페이지의 수를 계산하여 누락 된 내용이 없는지 확인합니다.

ref로 얻을 수있는 html 요소의 노드 또는 document.getElementById을 전달해야하며이 함수는 높이와 너비가 적용된 이미지를 계산합니다.

기준 ->

dom-to-image

jspdf

출처

2017-12-27 08:56:02

주는 하나의 에러 => 오류 : node.cloneNode 함수 – Yog

N 한가지 더 아니다. "ref"로 무엇을 전달해야합니까 ?? – Yog

ref 반응해야하는 DOM 노드의 ID가 ref를 제공합니다. 즉, DOM 노드에 대한 참조를 제공합니다. –

ReactJS에서 PDF 작성

답변

관련 문제