我一直在开发一个投票应用程序.他们可以创建关于他们的问题的调查数据.我想添加功能,让用户下载PDF格式的结果.
例如,我有两个组件负责获取问题和数据.
<QuestionBox />
<ViewCharts />
我正在try 将这两个组件输出到PDF文件中.用户可以下载这个PFD文件.我发现了一些允许在组件中呈现PDF的包.然而,我没有找到一个可以从由虚拟DOM组成的输入流生成PDF的方法.如果我想从头开始实现这一目标,我应该遵循什么方法?
我一直在开发一个投票应用程序.他们可以创建关于他们的问题的调查数据.我想添加功能,让用户下载PDF格式的结果.
例如,我有两个组件负责获取问题和数据.
<QuestionBox />
<ViewCharts />
我正在try 将这两个组件输出到PDF文件中.用户可以下载这个PFD文件.我发现了一些允许在组件中呈现PDF的包.然而,我没有找到一个可以从由虚拟DOM组成的输入流生成PDF的方法.如果我想从头开始实现这一目标,我应该遵循什么方法?
渲染pdf通常是一件痛苦的事情,但有一种方法可以通过使用画布来解决.
The idea is to convert : HTML -> Canvas -> PNG (or JPEG) -> PDF
要实现上述目标,您需要:
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时,可以获得更好的准确性.
Update 0: September 14, 2018
通过这种方法创建的PDF上的文本将不可 Select .如果这是一个要求,你可能会发现this article个有用的.