首页 > 解决方案 > 在 React js 上生成 PDF 不起作用

问题描述

当我尝试导出设计为 Jaspersoft® Studio 的 PDF 报告时遇到了这个问题,该方法可以完成所有工作,但它不下载 PDF

我使用 reactjs v16.0 和 spring boot 2.0 spring boot 用于生成 pdf,reactjs 用于调用 rest api rest api

我的代码详细信息如下

反应js代码:

   export function* downloadMarkSheetByRollRange() {    
   const requestURL = "http://192.168.31.215:8083/marksheet/single/download?startRoll=1&endRoll=20&classConfigId=100148&examConfigId=53&marksheetYear=2017"
   const options = {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  };

  console.log(requestURL);
  const result = yield call(request, requestURL, options);
}

export default function* defaultSaga() {
  yield takeLatest(SUBMIT_DOWNLOAD, downloadMarkSheetByRollRange);

} 

Here is my index.js page

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';

import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectGeneralExamMarkSheet from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';
import { Button } from 'primereact/components/button/Button';

export class GeneralExamMarkSheet extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {   
 return (
      <div>
        <Panel header="General Exam MarkSheet" >
          <Button label="Download" icon="ui-icon-search" onClick = 
                {this.props.downloadMarkSheet} >
           </Button>
        </Panel>
     </div>
  );
 }
}

GeneralExamMarkSheet.propTypes = {};
const mapStateToProps = createStructuredSelector({});

function mapDispatchToProps(dispatch) {
  return {
          dispatch,
  };
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer(
 { 
  key:'generalExamMarkSheet',reducer
 });
const withSaga = injectSaga({ key: 'generalExamMarkSheet', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(GeneralExamMarkSheet);

但是当我在浏览器中点击http://192.168.31.215:8083/marksheet/single/download?startRoll=1&endRoll=20&classConfigId=100148&examConfigId=53&marksheetYear=2017 url 然后生成pdf

这是我尝试响应 js 时的浏览器响应

在此处输入图像描述

任何想法?

标签: reactjsspring-bootspring-data-jparedux-saga

解决方案


推荐阅读