时间戳

首页 > 解决方案 > 如何实现带有打印功能的react-pdf

reactjs - 如何实现带有打印功能的react-pdf

问题描述

我想使用 react-pdf 来显示 PDF 并开发用于直接打印的打印功能（例如使用 window.print()）；

REST 服务器是使用 Jersey 开发的。

PDF 将从服务器生成并使用 Jersey 返回到 React 客户端，返回类型为 application/pdf。React 客户端将使用 react-pdf 显示 PDF。

我不想在“文件”中声明 URL 路径，因为如果 React 状态发生更改并触发重新渲染，这将再次从服务器检索 PDF。另外，我需要开发一个打印功能来打印显示的PDF（因为如果再次从服务器检索PDF，PDF内容可能会改变）

下面显示我的代码：

服务器：

@Override
@GET
@Path("/pdf")
@Produces(MediaType.APPLICATION_PDF_VALUE)
public Response testPdf() throws Exception {

    File file = new File("C:\\Desktop\\test.pdf");
    FileInputStream fileInputStream = new FileInputStream(file);
    
    ResponseBuilder response = Response.ok((Object) fileInputStream);
    response.type("application/pdf");
    response.header("Content-Disposition", "filename=test.pdf");
    
    return response.build();
}

客户

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
import axios from 'axios';

class MyApp extends Component {
    state = {
        numPages: null,
        pageNumber: 1,
        pdfContent: null
    }

    componentDidMount(){
        var that = this;

        axios.get("url\Pdf").then((response) => {
             that.setState({pdfContent:response.data});
        }).catch((error) => {
             console.warn(error);
        });
    }

    onDocumentLoadSuccess = ({ numPages }) => {
        this.setState({ numPages });
    }

    printHandler(){
        window.print();
    }

    render() {
        const { pageNumber, numPages } = this.state;

        return (
            <div>
                <Document
                    file={this.state.pdfContent}
                    onLoadSuccess={this.onDocumentLoadSuccess}
                >
                    <Page pageNumber={pageNumber} />
                </Document>
                <p>Page {pageNumber} of {numPages}</p>

                <button onClick={() => this.setState(prevState => ({ 
                        pageNumber: prevState.pageNumber + 1 }))}>Next page</button>
                <button onClick={() => this.setState(prevState => ({ 
                        pageNumber: prevState.pageNumber - 1 }))}>Prev Page</button>

                <button onClick={this.printHandler}/>
            </div>
        );
    }
}

我只想获取一次 PDF 并使用 react-pdf 显示 PDF。另外，我想打印显示的 PDF。

我尝试将 response.data 转换为 base64，因为没有成功：（这将丢失 pdf 内容） 在 ReactJS 中将 PDF 编码为 base64

代码如：

    componentDidMount(){
        var that = this;

        axios.get("url\Pdf").then((response) => {
            let reader = new FileReader();
            var file = new Blob([response.data], { type: 'application/pdf' });

            reader.onloadend = () => {
                that.setState({
                    base64Pdf:reader.result
                });
            }
            reader.readAsDataURL(file);
        }).catch((error) => {
             console.warn(error);
        });
    }

任何人都可以给我一些建议吗？或者有什么更好的方法来达到我的目标？

谢谢

标签： reactjspdfjerseystatereact-pdf

解决方案

最近收到了一个类似pdf部分的用例，我的请求是Post，但是你可以让它Get没问题。那么，发生了什么：

1) - 我正在使用axios向后端发出请求：

2) - request是我要发送的对象，但你不会有这样的对象，因为你可能只会发送 id，例如：axios.get('here.is.your/endpoint/id');

3) - 我正在使用：file-saver 来保存我收到的文件。

其余的代码应该是不言自明的，我还添加了一些注释。

import {saveAs} from "file-saver";
...

axios.post('here.is.your/endpoint', qs.parse(request), {
       headers: {
          'Content-Type': 'application/json'
       },   
       responseType: 'blob' // here I am forcing to receive data in a Blob Format
    })
    .then(response => {
        if (response.data) {
            //Create a Blob from the PDF Stream
            const file = new Blob(
                [response.data],
                {type: 'application/pdf'});
            const name = 'Report.pdf';
            saveAs(file, name);
        } else {
            throw new Error("Error in data type received.");
        }
    })
    .catch(error => {
        this.setState({
            modalMessage: "Here Add Custom Message"
        });
   });

我仍然无法从后端收到错误消息，如果我在这方面取得一些进展，我会发回短信 - 现在，我显示一条自定义消息。

我希望这会有所帮助！

祝你好运！

推荐阅读