PDF를 React에서 만드는 방법은 무엇입니까?

Question

React.JS에서 jsPDF 라이브러리를 사용할 예정이지만 오류가 발생했습니다. 누군가 내 쿼리를 받으면 알려 주시기 바랍니다. 나는 2 일 이상을 노력했지만 나는 할 수 없다.

Answer 1

1 단계 :

Package.json 종속 "jspdf": "자식 : //github.com/MrRio/jsPDF/#76edb3387cda3d5292e212765134b06150030364" 이 작동하지 않습니다 NPM에 대한 jspdf 때문이다.

2 단계 :

추가 인쇄 기능

onPrint() { 
    const { vehicleData } = this.props.parkedVehicle; 
    const { 


    plate_no, 
     max_time, 
     entry_date_time, 
     exit_date_time, 
     expiry_time, 
     address1, 
     address2, 
     city, 
     state, 
     zip, 
     country, 
     parking_status 
    } = vehicleData; 

    var pdfConverter = require('jspdf'); 
    //var converter = new pdfConverter(); 
    //var doc = converter.jsPDF('p', 'pt'); 

    var doc = new pdfConverter('p','pt','c6'); 

    doc.setFontSize(22); 
    doc.text(20, 50, 'Park Entry Ticket'); 
    doc.setFontSize(16); 
    doc.text(20, 80, 'Address1: ' + address1); 
    doc.text(20, 100, 'Address2: ' + address2); 
    doc.text(20, 120, 'Entry Date & time: ' + entry_date_time); 
    doc.text(20, 140, 'Expiry date & time: ' + exit_date_time); 
    doc.save("test.pdf"); 
} 

그리고 그것은 나에게 괜찮 았는데.

Answer 2

이제 React 구성 요소를 pdf로 직접 변환 할 수 있습니다.

아이디어는 다음과 같은 변화를 통해 반응 렌더링 전달하는 것입니다 : DOM -> CANVAS -> PNG -> PDF

캔버스에 DOM을 위해, 우리는 html2canvas 라이브러리를 사용할 수 있습니다. PNG 로의 캔버스는 간단합니다. PNG에서 PDF에 이르기까지 jsDom을 사용할 수 있습니다.

동일한 내용을 더 자세히 설명하고 코드 샘플 here을 게시 한 답변을 게시했습니다.