Question

对于我们当前的项目，我们需要能够在<div></div>个文件之外创建PDF文件。

当我查看其中大多数代码时，它们是从ReactDom.Render()而不是render类中提取的：

一个例子来自React-pdf：

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

我尝试使用Google搜索并尝试使用它，但是我所做的一切都会引发错误。

我对SPFx，Javascript和React相当陌生。

我习惯使用的是render方法：

export default class PDF extends React.Component<IPDFProps, {}> {
  public render(): React.ReactElement<IPDFProps> {
    return (
        // my components
    );
  }
}

它不仅是React-pdf，而且还有pdfMake，react-pdf-js等。

我可以使jsPDF正常工作，但是我不喜欢您需要如何设置每个零件的坐标。如果部分更改，则必须重做所有其他坐标。

Answer 1

我想也许您对这一行感到困惑：

ReactDOM.render(<App />, document.getElementById('root'));

基本上，这就是说渲染我的App组件（第一个参数），并将其注入到此节点的dom中（第二个参数）。

这只是将您的反应代码注入dom的标准代码。但是，您可以随意导入和使用PDFViewer。例如，您可以这样做：

  export default class PDF extends React.Component<IPDFProps, {}> {
  public render(): React.ReactElement<IPDFProps> {
    return (
      <PDFViewer>
        <MyDocument />
      </PDFViewer>
    );
  }
}

SharePoint Framework应用程序中的ReactDom.Render（）

1 个答案: