title: How to implement react-pdf with print function
body: <p>I would like to use react-pdf to display the PDF and develop a printing function for direct printing (like using window.print());</p>
  <p>The REST server is developed using Jersey.</p>
  <p>The PDF will generate from server and return to React client using Jersey with return type is application/pdf. React client will display the PDF using react-pdf.</p>
  <p>I don't want to declare the URL path in &quot;file&quot; because this will retrieve the PDF from server again if the React state changed and triggered re-render. Also, I need to develop a print function to print the PDF displayed (Because the PDF content may change if retrieve the PDF again from server)</p>
  <p>Below show my code:</p>
  <p>Server:</p>
  <pre><code>@Override
  @GET
  @Path(&quot;/pdf&quot;)
  @Produces(MediaType.APPLICATION_PDF_VALUE)
  public Response testPdf() throws Exception {
  
      File file = new File(&quot;C:\\Desktop\\test.pdf&quot;);
      FileInputStream fileInputStream = new FileInputStream(file);
      
      ResponseBuilder response = Response.ok((Object) fileInputStream);
      response.type(&quot;application/pdf&quot;);
      response.header(&quot;Content-Disposition&quot;, &quot;filename=test.pdf&quot;);
      
      return response.build();
  }
  </code></pre>
  <p>Client</p>
  <pre><code>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(&quot;url\Pdf&quot;).then((response) =&gt; {
               that.setState({pdfContent:response.data});
          }).catch((error) =&gt; {
               console.warn(error);
          });
      }
  
      onDocumentLoadSuccess = ({ numPages }) =&gt; {
          this.setState({ numPages });
      }
  
      printHandler(){
          window.print();
      }
  
      render() {
          const { pageNumber, numPages } = this.state;
  
          return (
              &lt;div&gt;
                  &lt;Document
                      file={this.state.pdfContent}
                      onLoadSuccess={this.onDocumentLoadSuccess}
                  &gt;
                      &lt;Page pageNumber={pageNumber} /&gt;
                  &lt;/Document&gt;
                  &lt;p&gt;Page {pageNumber} of {numPages}&lt;/p&gt;
  
                  &lt;button onClick={() =&gt; this.setState(prevState =&gt; ({ 
                          pageNumber: prevState.pageNumber + 1 }))}&gt;Next page&lt;/button&gt;
                  &lt;button onClick={() =&gt; this.setState(prevState =&gt; ({ 
                          pageNumber: prevState.pageNumber - 1 }))}&gt;Prev Page&lt;/button&gt;
  
                  &lt;button onClick={this.printHandler}/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>I want to get the PDF only one time and display the PDF using react-pdf. Also, I want to print the displayed PDF.</p>
  <p>I tried to convert the response.data to base64 followed this line because not success: (this will lose the pdf content)
  <a href="https://stackoverflow.com/questions/49795303/encode-pdf-to-base64-in-reactjs">Encode PDF to base64 in ReactJS</a></p>
  <p>Code like:</p>
  <pre><code>    componentDidMount(){
          var that = this;
  
          axios.get(&quot;url\Pdf&quot;).then((response) =&gt; {
              let reader = new FileReader();
              var file = new Blob([response.data], { type: 'application/pdf' });
  
              reader.onloadend = () =&gt; {
                  that.setState({
                      base64Pdf:reader.result
                  });
              }
              reader.readAsDataURL(file);
          }).catch((error) =&gt; {
               console.warn(error);
          });
      }
  </code></pre>
  <p>Anyone can give me some suggestion?
  Or any better way to reach my goal?</p>
  <p>Thanks</p>