從React Components生成PDF文件

Question

我一直在構建一個輪詢應用程序。人們可以創建他們的民意調查並獲得有關他們所問問題的數據。我想添加功能讓用戶以PDF格式下載結果。

例如，我有兩個組件負責抓取問題和數據。

<QuestionBox /> 
<ViewCharts /> 

我試圖將這兩個組件輸出到PDF文件中。用戶可以下載這個PFD文件。我發現了一些允許在組件內渲染PDF的軟件包。但是我沒有找到一個可以從包含虛擬DOM的輸入流生成PDF的程序。如果我想從頭開始實現，我應該遵循什麼方法？

Answer 1

渲染反應爲PDF通常是一種痛苦，但是使用畫布有一種解決方法。

的想法是轉換： HTML - >帆布 - > PNG（或JPEG） - > PDF

爲了實現上述目標，您需要：

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>); 
 
    } 
 
}

由於所需文件沒有導入，代碼片段在這裏不起作用。

在this answer中使用了一種替代方法，其中中間步驟被刪除，您可以簡單地從HTML轉換爲PDF。在jsPDF文檔中也有一個選項可以做到這一點，但從個人觀察來看，我認爲當dom首先轉換爲png時會獲得更好的準確性。