Wie öffne ich ein pdf in reactjs?

Question

for web api I am returing the pdf as :-

[EnableCors("*", "*", "*")] 
[HttpGet] 
public byte[] GetReportData() 
{ 
string filePath = "D:\\Decoding.pdf"; 
byte[] bytes = File.ReadAllBytes(filePath); 
return bytes; 
} 

ich die Methode in meinem Handeln und Minderer als Aufruf: -

Aktion: -

export function LoadReportData() { 
    return (dispatch) => { 
    dispatch({ 
     type: REQUEST_REPORT,//defining the name of the action to identify in the reducer 
    }); 

    fetch(APIPATH+'Requisition/GetReportData')//calling the service 
    .then((response) => response.json()) 
    .then((report) => dispatch(receiveReport(report)));//passing the data to other actions 
    } 
} 


//this method use to pass the data coming for the lab test result to the component 
export function receiveReport(report) { 

    return { 
    type:RECEIVE_REPORT,//defining the name of the action to identify in the reducer 
    report:report//passing the data to reducer 
    }; 
} 

Reduzierungen: -

case 'RECEIVE_REPORT': 
     return Object.assign({}, state, { 
      report: action.report, 
      loadingReport: false, 
     }); 
    case 'REQUEST_REPORT': 
     return Object.assign({}, state, { 
      loadingReport: true 
     }); 

nun der Bericht kommt als Byte, als ich von der Web-API übergeben wurde. Nun meine Anforderung ist, wie kann ich diese PDF-Datei, die als Byte-Array kommt aus der Web-API in meiner Komponente oder der nächsten Registerkarte des Browsers anzeigen. Hinweis: Bericht über die Byte-Array

Answer 1

Sie enthält haben PDFBox zu verwenden, die als Glas verfügbar ist, sollte pdf-Dateien zu öffnen

Answer 2

Sie installieren react-pdf

Install with npm install react-pdf 

Verwendung in Ihrer Anwendung:

var PDF = require('react-pdf'); 

var MyApp = React.createClass({ 
    render() { 

    return '<PDF content="YSBzaW1wbGUgcGRm..." page="1" scale="1.0" onDocumentComplete={this._onDocumentComplete} onPageComplete={this._onPageComplete} loading={(<span>Your own loading message ...</span>)} />'; 
    }, 
    _onDocumentCompleted(pages){ 
    this.setState({pages}); 
    }, 
    _onPageCompleted(page){ 
    this.setState({currentPage: page}); 
    } 
}); 

Answer 3

I am posting my code which is working fine for me:-

import React,{Component} from 'react' 
import ReactDOM from "react-dom"; 
import PDF from "react-pdfjs"; 
class PreviewComponent extends Component{ 
constructor(props) { 
    super(props); 
    this.state={ 
     reportData:this.props.reportData, 
     page:1, 
     scale:1.0 
    } 
    this.onDocumentCompleted=this._onDocumentCompleted.bind(this); 
    this.onPageCompleted=this._onPageCompleted.bind(this); 
    } 

render() { 
     return <PDF content={this.state.reportData} page={this.state.page} scale={this.state.scale} onDocumentComplete={this._onDocumentComplete} onPageComplete={this._onPageComplete} loading={(<span>Your own loading message ...</span>)} /> 
    } 
    _onDocumentCompleted(pages){ 
    this.setState({pages: pages}); 
    } 
    _onPageCompleted(page){ 
    this.setState({currentPage: page}); 
    } 
} 
export default PreviewComponent;