如何在reactjs中打開pdf？

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; 
} 

我打電話我的動作和減速的方法： -

操作： -

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 
    }; 
} 

減速器： -

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

現在新報告就像我從web api傳遞的字節一樣。現在我的要求是，我怎樣才能顯示這個PDF文件，即從我的組件或瀏覽器的下一個選項卡中的web api字節數組來？ 注：報告包含字節

Answer 1

的數組，你必須使用PDFBOX其可作爲罐子打開PDF文件

Answer 2

您應該安裝react-pdf

Install with npm install react-pdf 

使用在您的應用程序：

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;