Question

我正在尝试查看从axios的服务中获取的pdf。

我有一个对话框，其中有一个“打印”按钮，可打开另一个对话框，该对话框应为pdf格式。不幸的是，我正在处理第二个对话框的道具（文件）是不确定的。我调用的服务方法只是返回byte []，所以我的响应是一个ArrayBuffer。

这是一些代码。

主要对话

state = {
    open: false,
    pdf: undefined // my file
}
....
// this prints some data I send to the service and receives a file that I place in my state
print = async table => { 
    const pdf = await this.props.print(somedata); // send some data to service and get the pdf blob in the response
    let fileUrl = URL.createObjectURL(pdf); // create a url
    this.setState({ // open the dialog and set the content
      pdf: fileUrl,
      isPDFDialogOpen: true
    });
  }
....
render() {
    const { isPDFDialogOpen, pdf} = this.state;
    return() {
    <div>
        <DialogContent>
            <IconButton><PrintIcon onClick={ () => this.print() } /></IconButton>
        </DialogContent>
        <SecondDialog open={isPDFDialogOpen} close={this.closePDFViewer} file={pdf}/>

    </div>
    )
}

第二个对话

import { Document, Page } from "react-pdf/dist/entry.webpack";
....
render () {
    const { file, open, close, title } = this.props;
    const { numPages, pageNumber } = this.state;
    console.log(file) // returns undefined -> this should be this.props.file
    return (
      <Dialog
        open={ open }
        fullScreen
      >
        <DialogContent>
          <Document
            file={ file }
            onLoadSuccess={ this.onDocumentLoadSuccess }
          >
            <Page pageNumber={ pageNumber } />
          </Document>
          <p>Page { pageNumber } of { numPages }</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={ close }>CLOSE</Button>
        </DialogActions>
      </Dialog>
    );
  }

AXIOS

export const print = data => {
  return axios({
    url: `someurl`,
    responseType: 'blob',
    data: data,
    timeout: 20000,
    method: 'POST'
  }).then(response => {
    console.log(response)
    return response.data;
  }).catch(error => {
    if (error.response) {
      // DEBUGGING
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });
}

AND mapDispatchToProps

const mapDispatchToProps = dispatch => ({
  print: (data, type) => print(data, type)
});

这就是我收到的信息-第一个日志是console.log(response)，第二个日志是console.log(response.data)。如果我执行window.open(pdf)，则会打开一个新标签页并立即将其关闭。第二个对话框只是给我Loading PDF…

我正在使用"react": "^16.3.1", "react-pdf": "^4.0.5", "@material-ui/core": "^3.4.0", "axios": "^0.18.0",

我很高兴提供任何提示，包括使用其他库查看pdf！

编辑：我从axios删除了responseType，现在我收到的数据看起来像。我该如何处理？

我尝试过的其他事情：

print = async table => { 
    const pdf = await this.props.print(somedata, table);
    const file = new Blob([pdf], {type: 'application/pdf'});
    let fileUrl = URL.createObjectURL(file);
    this.setState({ // open the dialog and set the content
      pdf: fileUrl,
      isPDFDialogOpen: true
    });
  }

如果我打印fileUrl，它会给我这个blob:http://192.168.1.250:3000/ff3efca5-becd-49df-be83-66c7ff945f80，如果我尝试通过window.open()打开它，它会打开一个选项卡，并在一瞬间将其关闭。

编辑：我放弃了这种方法。对我有用的是使用<object />标签。现在，我收到了以base String编码为base64的文件，并使用this中的Jeremy方法对其进行了解码。

我的代码现在看起来像这样：

<div>
    <object style={{height: '85vh'}} data={ this.props.file } type="application/pdf" width='100%' height='100%'>alt : <a href="test.pdf"/>
    </object>
</div>

如果有人知道为什么react-pdf没有呈现我的文件，请添加答案或评论！

无法使用react-pdf查看.pdf文件

0 个答案: