Question

我目前正在尝试使用react-pdf来生成pdf并将其保存到磁盘。渲染到网页可以，但是我需要调用将pdf保存到光盘的方法

    ReactPDF.render()

在运行我过去用来创建网页的React的npm start（反应脚本）方式下不起作用。通过阅读this issue，似乎它需要作为“仅节点api”运行。所以我的问题是，我需要采取什么依赖关系，命令和步骤来运行一些反应代码并将pdf文件保存到磁盘，例如

   > node index.js

当前，当我运行上述命令时，我得到

import React from 'react';
       ^^^^^
SyntaxError: Unexpected identifier

然后运行

    node --experimental-modules index.mjs

我知道

ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);
                ^
SyntaxError: Unexpected token <

这是我的两个文件：

index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import ReactPDF from '@react-pdf/renderer';


    ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);
    //ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'

class App extends Component {



  render() {

    const styles = StyleSheet.create({
      page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
      },
      section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
      }
    });


    return (
      <Document>
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Text>Section #1</Text>
          </View>
          <View style={styles.section}>
            <Text>Section #2</Text>
          </View>
        </Page>
      </Document>
    );
  }
}

export default App;

package.json

{
  "name": "ccv-generator-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-pdf/renderer": "^1.4.2",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-scripts": "2.1.8",
    "ts-pnp": "^1.0.1",
    "typescript": "^3.3.4000"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

接下来的问题是，我正在尝试做反模式吗？

Answer 1

由于您是直接从节点运行index.mjs，因此它不会经过react-scripts的构建和编译过程，这意味着您必须手动执行。

Node无法直接解析jsx（例如，<App/>），因此您需要通过Babel和React preset通过{{3}}运行代码才能运行它。

由于应该已经安装了依赖项，请尝试运行：

npx babel index.mjs -o index-compiled.js --presets=es2015,react

，然后运行编译的文件：

node index-compiled.js

如何在Node脚本中使用React组件？

1 个答案: