0

对于我们当前的项目，我们需要能够从 s.pdf 文件中创建一个 PDF 文件<div></div>。

当我查看其中大多数的代码时，它们是从ReactDom.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'));

我试过谷歌搜索和玩弄它，但我所做的一切都会引发错误。

我对 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 工作，但我不喜欢你需要如何设置每个部分的坐标。如果某个部分发生更改，则必须重做所有其他坐标。

4

1 回答 1

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>
    );
  }
}
于 2019-06-14T15:57:28.710 回答