Question

我目前正在尝试使用react-pdf库（https://www.npmjs.com/package/react-pdf）在我的应用程序中呈现pdf。尽管有简单的指示，但我似乎在使这个工作变得非常困难。

目前，尽管构建成功，但我的dev-tools控制台出现错误，终端没有任何错误：

    1a4953075f808eb6a767.worker.js:1 Uncaught SyntaxError: Unexpected token <

对来源的检查揭示了我的index.html入口点的副本。

可以在此处找到此库的webpack.config示例：https://github.com/wojtekmaj/react-pdf/blob/master/test/webpack.config.js#L19-L22

为了清楚起见，在此之前正确配置了webpack，并且此错误仅存在于我实现此库的分支上。

webpack.config.js

'use strict'

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')


module.exports = {
  entry: './client/app.jsx',
  output: {
    path: path.join(__dirname, './public/dist'),
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.pdf$/,
        use: 'url-loader'
      }, {
        test: /\.jsx?$/,
        include: /client/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {
          presets: ['react', 'es2015'],
        }
      }, {
        test: /\.(scss|css)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }, {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: './public/index.html' },
      { from: './client/assets/resume.pdf' },
      { from: 'node_modules/pdfjs-dist/cmaps/', to: 'cmaps/' }
    ])
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.png', '.pdf', '*']
  }
}

的index.html

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>XXXXXXXXXX</title>

  <link type="text/css" href="/client/styles/index.scss" />

  <!-- browser reset -->
  <link type="text/css" rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

  <!-- fonts -->
  <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono" >

  <script src="dist/bundle.js" defer></script>

</head>
<body>

  <div id="app"></div>

</body>
</html>

Resume.jsx

'use strict'

import React, { Component } from 'react'
import { Document, Page, setOptions } from 'react-pdf/build/entry.webpack'

import resume from '../assets/resume.pdf'


setOptions({
  cMapUrl: 'cmaps/',
  cMapPacked: true
})


export default class Resume extends Component {
  constructor (props) {
    super(props)
    this.state = {
      numPages: null,
      pageNumber: 1,
    }
  }

  onDocumentLoad ({ numPages }) {
    this.setState({ numPages })
  }

  render() {
    const { pageNumber, numPages } = this.state

    return (
      <div>
        <Document
          file={ resume }
          onLoadSuccess={ this.onDocumentLoad }
        >
          <Page pageNumber={ pageNumber } />
        </Document>
        <p>Page { pageNumber } of { numPages }</p>
      </div>
    )
  }
}

这也是我在stackoverflow上发布的第一个问题，所以如果有什么我做错了，我会道歉。

更新

我已将错误跟踪到我从哪里导入＆＃39; react-pdf / build / entry.webpack＆＃39;在我的Resume.jsx文件中。由于我不熟悉这种类型的文件，我无法立即确定错误的原因，但我仍然在研究它。这是有问题的文件：

entry.webpack.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.setOptions = exports.Page = exports.Outline = exports.Document = undefined;

var _Document = require('./Document');

var _Document2 = _interopRequireDefault(_Document);

var _Outline = require('./Outline');

var _Outline2 = _interopRequireDefault(_Outline);

var _Page = require('./Page');

var _Page2 = _interopRequireDefault(_Page);

var _setOptions = require('./setOptions');

var _setOptions2 = _interopRequireDefault(_setOptions);

var _util = require('./shared/util');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

if (_util.isLocalFileSystem) {
  // eslint-disable-next-line no-console
  (0, _util.warnOnDev)('You are running React-PDF from your local file system. PDF.js Worker may fail to load due to browser\'s security policies. If you\'re on Google Chrome, you can use --allow-file-access-from-files flag for debugging purposes.');
}

var pdfjs = require('pdfjs-dist/webpack');

var setOptions = (0, _setOptions2.default)(pdfjs);

exports.Document = _Document2.default;
exports.Outline = _Outline2.default;
exports.Page = _Page2.default;
exports.setOptions = setOptions;

Answer 1

我为我的案例提出了一个合适的解决方案，但对于那些可能需要渲染多个页面的人来说，这不是最佳选择。我只是选择不使用worker并解决了这个绑定的问题，以允许它在没有worker的情况下工作。

Resume.jsx内部

import { Document, Page, setOptions } from 'react-pdf/build/entry.noworker'

...

  constructor (props) {
    super(props)
    this.state = {
      numPages: null,
      pageNumber: 1
    }
    this.onDocumentLoad = this.onDocumentLoad.bind(this) // ADD THIS LINE
}

未捕获的SyntaxError：意外的令牌＆lt; reactjs react-pdf

1 个答案: