Pdf.js pdfjsLib.getDocument () не работает в React - PullRequest
Новая
       45

Pdf.js pdfjsLib.getDocument () не работает в React

0 голосов
/ 26 октября 2019

Я создал веб-сайт с 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 обеспечивает функциональность перехватчиков.

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: Невозможно прочитать свойство 'context' из неопределенного `` `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;
...