如何在reactjs中打开pdf? [英] How to open a pdf in reactjs?

问题描述

对于 web api，我将 pdf 返回为:-

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

我在我的操作和减速器中调用方法:-

I am calling the method in my action and reducer as:-

操作:-

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 传递的字节形式出现.现在我的要求是如何在我的组件或浏览器的下一个选项卡中显示这个来自 web api 的字节数组的 pdf 文件?注意:报告包含字节数组

Now the report is coming as byte as I passed from the web api. Now my requirement is how can I display this pdf file that is coming as byte array from the web api in my component or next tab of browser?. Note: report contains the array of bytes

推荐答案

你应该安装 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});
  }
});

这篇关于如何在reactjs中打开pdf?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！