reactjs - Pdf.js pdfjsLib.getDocument() 在 React 中不起作用

Question

我已经建立了一个网站create-react-app，我正在使用"react-dom": "^16.9.0", "react": "^16.9.0"并安装了"pdfjs-dist": "^2.2.228".

我尝试了下面发布的完全相同的代码，pdfjs-dist在克隆的存储库中安装相同版本的https://github.com/yurydelendik/pdfjs-react并让它在那里工作。我认为唯一可能导致问题的是我的 react 版本或 react-dom 版本，但我不能降级，因为这个 React 版本提供了钩子功能。

PS：我尝试"pdfjs-dist": "^1.8.432"在我的 React 项目中安装并出现以下错误：

./node_modules/pdfjs-dist/build/pdf.worker.js (./node_modules/worker-loader!./node_modules/pdfjs-dist/build/pdf.worker.js) TypeError：无法读取未定义的属性“上下文” ```js

import React, { Component } from 'react';
import './App.css';
import pdfjsLib from 'pdfjs-dist/webpack';
import axios from "axios";

class App extends Component {

  handleChange =  async (e) => {
      var formData = new FormData();
      formData.append("file", e.target.files[0]);

      try {
        const res = await axios.post("http://localhost:8080/files/convert",  formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
        });

        var ab = new ArrayBuffer(res.data.data.data.length);
        var view = new Uint8Array(ab);
        for (var i = 0; i < res.data.data.data.length; ++i) {
            view[i] = res.data.data.data[i];
        }

        var blob = new Blob([ab], {type: 
          "application/pdf"}); 

  debugger
        let loadingTask = pdfjsLib.getDocument(ab);
        loadingTask.promise.then((doc) => {
          doc.getPage(1).then(function getPageHelloWorld(page) {
          debugger
          var scale = 0.5;
          var viewport = page.getViewport(scale);
          //
          // Prepare canvas using PDF page dimensions
          //
          var canvas = document.getElementById('the-canvas');
          var context = canvas.getContext('2d');
          debugger
          canvas.height = viewport.height / 2;
          canvas.width = viewport.width;
          //
          // Render PDF page into canvas context
          //
          var task = page.render({canvasContext: context, viewport: viewport})
          task.promise.then(function(){
            console.log(canvas.toDataURL('image/jpeg'));
          });
        });
      }, (reason) => {
        console.error(`loading: ${reason}`);
      });   
    } catch(err) {
        console.log(err)
    };
   }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <input class="btn btn-dark" type="file" onChange={this.handleChange}/>
        </div>
        <div className="App-body">
          <canvas id="the-canvas" style={{border:'1px solid black'}}></canvas>
        </div>
      </div>
    );
  }
}

export default App;

标签： reactjspdf.js