我一直在构建一个投票应用程序。人们能够创建他们的民意调查并获取有关他们提出的问题的数据。我想添加功能，让用户以 PDF 的形式下载结果。
例如，我有两个组件负责获取问题和数据。
<QuestionBox />
<ViewCharts />
我正在尝试将两个组件输出到 PDF 文件中。然后用户可以下载这个 PFD 文件。我发现了一些允许在组件内呈现 PDF 的包。但是，我未能找到可以从包含虚拟 DOM 的输入流生成 PDF 的方法。如果我想从头开始实现这一目标，我应该遵循什么方法？
从 React Components 生成 PDF 文件
IT技术
reactjs
pdf
meteor
2021-04-05 04:49:49
6个回答
将react渲染为 pdf 通常很痛苦，但有一种使用画布的方法。
这个想法是转换：HTML -> Canvas -> PNG（或 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>);
}
}该代码段在此处不起作用，因为未导入所需的文件。
此答案中使用了另一种方法，其中删除了中间步骤，您可以简单地从 HTML 转换为 PDF。在jsPDF文档中也有一个选项可以这样做，但是从个人观察来看，我觉得先将dom转换为png会获得更好的准确性。
更新 0：2018 年 9 月 14 日
通过这种方法创建的 pdf 上的文本将无法选择。如果这是一个要求，您可能会发现这篇文章很有帮助。
您可以使用 jsPDF 来使用画布
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
_exportPdf = () => {
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas); // if you want see your screenshot in body.
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("download.pdf");
});
}
你用 id 捕获的 div 是：
例子
<div id="capture">
<p>Hello in my life</p>
<span>How can hellp you</span>
</div>
只需几步。我们可以从我们的 HTML 页面下载或生成 PDF，或者我们可以从 HTML 页面生成特定 div 的 PDF。
步骤：HTML -> 图像（PNG 或 JPEG） -> PDF
请按照以下步骤操作，
步骤1 ：-
npm install --save html-to-image
npm install jspdf --save
第2步 ：-
/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
/* ES5 */
var htmlToImage = require('html-to-image');
-------------------------
import { jsPDF } from "jspdf";
第 3 步：-
****** With out PDF properties given below ******
htmlToImage.toPng(document.getElementById('myPage'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
const pdf = new jsPDF();
pdf.addImage(dataUrl, 'PNG', 0, 0);
pdf.save("download.pdf");
});
****** With PDF properties given below ******
htmlToImage.toPng(document.getElementById('myPage'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
const pdf = new jsPDF();
const imgProps= pdf.getImageProperties(dataUrl);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(dataUrl, 'PNG', 0, 0,pdfWidth, pdfHeight);
pdf.save("download.pdf");
});
我认为这很有帮助。请试试
您可以使用 ReactDOMServer 将您的组件呈现为 HTML，然后在 jsPDF 上使用它。
首先做进口：
import React from "react";
import ReactDOMServer from "react-dom/server";
import jsPDF from 'jspdf';
然后：
var doc = new jsPDF();
doc.fromHTML(ReactDOMServer.renderToStaticMarkup(this.render()));
doc.save("myDocument.pdf");
更喜欢使用：
渲染到静态标记
代替：
渲染到字符串
由于前者包括react所依赖的 HTML 代码。