Javascript 拍摄React应用程序的屏幕截图并将其生成为PDF

我想从我的React应用程序生成一个PDF，最简单的方法可能是截取我的应用程序/理想情况下是一个div的当前状态的屏幕截图，并将其保存为PDF…我似乎无法找到最好的方法

---

有什么想法吗？

结合以下几点如何：

html2canvas：

及

jsPDF:

---

从html2canvas提供的画布中，您可以使用.toDataUrl（）将其转换为图像，然后使用.addImage（）方法将其输入jsPDF，该方法需要base64图像。

对于阅读此PDF的任何人，它还可以在浏览器中生成PDF…很好

您需要查看pdfkit网站，特别是我只使用pdfkit和blob stream的浏览器版本使其工作

我的代码看起来像

import PDFDocument from 'pdfkit'
import BlobStream from 'blob-stream'
import FileSaver from 'file-saver'

let doc = new PDFDocument()
    let stream = doc.pipe(BlobStream())
    addHeader(doc, 'My Report.....')
    doc.moveDown(0.5).fontSize(8)
   // render you doc
   // then add a stream eventListener to allow download
stream.on('finish', ()=>{
      let blob = stream.toBlob('application/pdf')
      FileSaver.saveAs(blob, 'myPDF.pdf')

    })
    doc.end()

使用并创建了react组件，该组件将div及其子组件导出为pdf和Image

react组件定义如下

        import React from 'react'
        import html2canvas from 'html2canvas'
        import { jsPDF } from "jspdf";
    
        class Exporter extends React.Component {
           constructor(props) {
             super(props)
           } 
    
        export =(type, name)=>{
    
        html2canvas(document.querySelector(`#capture`)).then(canvas => {
          let dataURL = canvas.toDataURL('image/png');
    
          if (type === 'pdf') {
            const pdf = new jsPDF({
              orientation: "landscape",
              unit: "in",
              format: [14, 10]
            });
    
            pdf.addImage(dataURL, 'PNG', .6, .6);
            pdf.save(`${name}.pdf`);
    
          } else if (type === 'png') {
            var link = document.createElement('a');
            link.download = `${name}.png`;
            link.href = dataURL;
            link.click();
          }
        });
     }
     render() { 
        return (
          <div>
            <button onClick={()=>this.export("pdf", "my-content")}></button>
            <div id={`capture`} >
              Content to export as pdf/png
              {this.props.children} //any child Component render here will be exported as pdf/png
            </div>
          </div>
        )
      }
    }

export default Exporter

从“React”导入React
从“html2canvas”导入html2canvas
从“jsPDF”导入{jsPDF}；
类导出器扩展了React.Component{
建造师（道具）{
超级（道具）
} 
导出=（类型、名称）=>{
html2canvas（document.querySelector（`capture`）），然后（canvas=>{
让dataURL=canvas.toDataURL（'image/png'）；
如果（类型=='pdf'）{
const pdf=新的jsPDF({
定位：“景观”，
单位：“in”，
格式：[14,10]
});
addImage（dataURL，'PNG'，.6，.6）；
保存（`${name}.pdf`）；
}else if（type=='png'）{
var link=document.createElement（'a'）；
link.download=`${name}.png`；
link.href=dataURL；
link.click（）；
}
});
}
render（）{
返回(
this.export（“pdf”、“我的内容”）}>
要导出为pdf/png的内容
{this.props.children}//此处呈现的任何子组件都将导出为pdf/png格式
)
}
}
导出默认导出器

这听起来是个好主意……只是不知道如何将库这样包含到我的reactjs应用程序中……有点新手：）没问题，如果你使用webpack，两个都可以在npm上使用：如果你只是在页面上包含React，两个都在上面的链接上有CDN链接。我刚刚发布了一个关于相同的详细答案。希望有帮助。我遇到的jsPDF存在问题。addImage方法以同步方式完成其工作，整个应用程序只是挂起。而且它不能移动到web worker中，因为它依赖于DOM。它不太方便用户使用。因此，我在客户端使用html2canvas，在后端使用pdfkit来解决类似的任务。不过，在任何一种情况下，这都是相当痛苦的。在react应用程序（想想react router dom route page）的上下文中，“呈现您的文档”会发生什么？如何下载pdfkit和blob流的“浏览器版本”？