如何在reactjs中打开pdf? [英] How to open a pdf in reactjs?
本文介绍了如何在reactjs中打开pdf?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
对于 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屋!
查看全文