मैं एक एनपीएम पुस्तकालय का उपयोग करने की कोशिश कर रहा हूं जो मुझे एक पीडीएफ दस्तावेज़ प्रस्तुत करने में मदद करता है। मुझे प्रतिक्रिया-पीडीएफ मिली लेकिन इसमें अभी तक टाइपस्क्रिप्ट के प्रकार नहीं हैं, इसलिए मैं इसका उपयोग कर रहा हूं जैसा कि मैं नीचे दिखाता हूं:

let Document = require('react-pdf');
let Page = require('react-pdf');

class PdfViewer extends React.Component<PdfViewer.Props, PdfViewer.State> {

  constructor(props: PdfViewer.Props) {
    super(props);
    this.state = {
      numPages: null,
      pageNumber: 1,
    };

  }
  onDocumentLoadSuccess = ( numPages: number ) => {
    this.setState({ numPages });

  }

  componentWillReceiveProps(nextProps: PdfViewer.Props) {
    // this.setState(CsvViewer.parse(nextProps.data));
  }

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

      const buffer = data as ArrayBuffer;

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

  }
}

लेकिन यह इस त्रुटि को फेंक रहा है:

तत्व प्रकार अमान्य है: अपेक्षित एक स्ट्रिंग (अंतर्निहित घटकों के लिए) या एक वर्ग/फ़ंक्शन (समग्र घटकों के लिए) लेकिन मिला: ऑब्जेक्ट।

मुझे GitHub में यह मिला, लेकिन इससे मुझे कोई खास मदद नहीं मिली। मैं पुस्तकालय के दस्तावेज़ीकरण पर गया, और मैंने फ़ाइल पैरामीटर में एक ऑब्जेक्ट पास किया क्योंकि वे करने के लिए दिखाओ लेकिन वही त्रुटि। मुझे लगता है कि कुछ और है। मैं react-pdf पुस्तकालय के स्रोत कोड पर गया और मुझे लगता है कि यह वह फ़ंक्शन है जिसका उपयोग वे पैरामीटर से फ़ाइल प्राप्त करने के लिए करते हैं:

findDocumentSource = async () => {
    const { file } = this.props;

    if (!file) {
      return null;
    }

    // File is a string
    if (typeof file === 'string') {
      if (isDataURI(file)) {
        const fileUint8Array = dataURItoUint8Array(file);
        return { data: fileUint8Array };
      }

      displayCORSWarning();
      return { url: file };
    }

    // File is PDFDataRangeTransport
    if (file instanceof PDFDataRangeTransport) {
      return { range: file };
    }

    // File is an ArrayBuffer
    if (isArrayBuffer(file)) {
      return { data: file };
    }

    /**
     * The cases below are browser-only.
     * If you're running on a non-browser environment, these cases will be of no use.
     */
    if (isBrowser) {
      // File is a Blob
      if (isBlob(file) || isFile(file)) {
        return { data: await loadFromFile(file) };
      }
    }

    // At this point, file must be an object
    if (typeof file !== 'object') {
      throw new Error('Invalid parameter in file, need either Uint8Array, string or a parameter object');
    }

    if (!file.url && !file.data && !file.range) {
      throw new Error('Invalid parameter object: need either .data, .range or .url');
    }

    // File .url is a string
    if (typeof file.url === 'string') {
      if (isDataURI(file.url)) {
        const { url, ...otherParams } = file;
        const fileUint8Array = dataURItoUint8Array(url);
        return { data: fileUint8Array, ...otherParams };
      }

      displayCORSWarning();
    }

    return file;
  };

लेकिन मुझे संदेह है कि त्रुटि यहाँ है, लेकिन मैं यह नहीं समझ सकता कि क्या हो सकता है। मैं जिस react का उपयोग कर रहा हूं उसका संस्करण 16.8.2 और react-pdf के लिए 4.0.2 है

3
octavioccl 21 फरवरी 2019, 22:00

1 उत्तर

सबसे बढ़िया उत्तर

यह गलत है:

let Document = require('react-pdf');
let Page = require('react-pdf');

जब आप ऐसा करते हैं तो आप संपूर्ण मॉड्यूल आयात कर रहे होते हैं। इसका मतलब है कि Document और Page दोनों में react-pdf के सभी मॉड्यूल शामिल हैं। इसके बजाय आप जो करना चाहते हैं वह है या तो ReactPDF आयात करें और उन मॉड्यूल का संदर्भ लें:

const ReactPDF = require('react-pdf');

<ReactPDF.Document />
<ReactPDF.Page />

या आप विध्वंसक का उपयोग कर सकते हैं:

import { Document, Page } from 'react-pdf';

//or

const { Document, Page } = require('react-pdf'); 

यदि टाइपस्क्रिप्ट अनुपलब्ध घोषणाओं के बारे में शिकायत करता है, तो बस अपने प्रोजेक्ट में एक @types फ़ोल्डर जोड़ें, इसके अंदर एक सबफ़ोल्डर बनाएं जिसे react-pdf कहा जाता है और उस फ़ोल्डर के अंदर फ़ाइल जिसे index.d.ts कहा जाता है, एक पंक्ति के साथ:

declare module "react-pdf"
5
Robbie Milejczak 21 फरवरी 2019, 22:07
मुझे यह कोशिश करने दो
 – 
octavioccl
21 फरवरी 2019, 22:08