Tạo tệp PDF từ React Components

Question

Tôi đã xây dựng một ứng dụng bỏ phiếu. Mọi người có thể tạo các cuộc thăm dò ý kiến ​​của họ và nhận dữ liệu về (các) câu hỏi họ hỏi. Tôi muốn thêm chức năng để cho phép người dùng tải xuống kết quả dưới dạng PDF.

Ví dụ: tôi có hai thành phần chịu trách nhiệm lấy câu hỏi và dữ liệu.

<QuestionBox /> 
<ViewCharts /> 

Tôi đang cố gắng xuất cả hai thành phần vào tệp PDF. Sau đó, người dùng có thể tải xuống tệp PFD này. Tôi đã tìm thấy một vài gói cho phép hiển thị tệp PDF bên trong một thành phần. Tuy nhiên, tôi không thể tìm thấy một tệp có thể tạo PDF từ luồng đầu vào bao gồm một DOM ảo. Nếu tôi muốn đạt được điều này từ đầu thì tôi nên làm theo cách tiếp cận nào?

Answer 1

Hiển thị phản ứng dưới dạng pdf thường là một nỗi đau, nhưng có một cách xung quanh nó bằng canvas.

Ý tưởng là để chuyển đổi: HTML -> Canvas -> PNG (hoặc JPEG) -> PDF

Để đạt được ở trên, bạn sẽ cần:

1. html2canvas &
2. jsPDF

import React, {Component, PropTypes} from 'react'; 
 

 
// download html2canvas and jsPDF and save the files in app/ext, or somewhere else 
 
// the built versions are directly consumable 
 
// import {html2canvas, jsPDF} from 'app/ext'; 
 

 

 
export default class Export extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 

 
    printDocument() { 
 
    const input = document.getElementById('divToPrint'); 
 
    html2canvas(input) 
 
     .then((canvas) => { 
 
     const imgData = canvas.toDataURL('image/png'); 
 
     const pdf = new jsPDF(); 
 
     pdf.addImage(imgData, 'JPEG', 0, 0); 
 
     // pdf.output('dataurlnewwindow'); 
 
     pdf.save("download.pdf"); 
 
     }) 
 
    ; 
 
    } 
 

 
    render() { 
 
    return (<div> 
 
     <div className="mb5"> 
 
     <button onClick={this.printDocument}>Print</button> 
 
     </div> 
 
     <div id="divToPrint" className="mt4" {...css({ 
 
     backgroundColor: '#f5f5f5', 
 
     width: '210mm', 
 
     minHeight: '297mm', 
 
     marginLeft: 'auto', 
 
     marginRight: 'auto' 
 
     })}> 
 
     <div>Note: Here the dimensions of div are same as A4</div> 
 
     <div>You Can add any component here</div> 
 
     </div> 
 
    </div>); 
 
    } 
 
}

Đoạn mã sẽ không hoạt động tại đây vì các tệp bắt buộc không được nhập.

Phương pháp thay thế đang được sử dụng trong this answer, trong đó các bước giữa bị giảm và bạn chỉ có thể chuyển đổi từ HTML sang PDF. Có một tùy chọn để làm điều này trong tài liệu jsPDF là tốt, nhưng từ quan sát cá nhân, tôi cảm thấy rằng độ chính xác tốt hơn là đạt được khi dom được chuyển đổi thành png đầu tiên.