Szeretném a react-pdf-et használni a PDF megjelenítéséhez, és egy nyomtatási funkciót szeretnék kifejleszteni a közvetlen nyomtatáshoz (például a window.print() használatával);
A REST szervert Jersey felhasználásával fejlesztették ki.
A PDF generálódik a szerverről, és visszatér a React klienshez a Jersey használatával, a visszaküldési típus: application/pdf. A React kliens a react-pdf használatával jeleníti meg a PDF-fájlt.
Nem szeretném deklarálni az URL elérési útját a fájlban, mert ez újra lekéri a PDF-fájlt a szerverről, ha a React állapot megváltozik és újrarenderelést vált ki. Ezenkívül ki kell fejlesztenem egy nyomtatási funkciót a megjelenített PDF kinyomtatásához (mert a PDF tartalom megváltozhat, ha újra lekéri a PDF-et a szerverről)
Alább mutasd meg a kódomat:
Szerver:
@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();
}
Ügyfél
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>
);
}
}
Csak egyszer szeretném beszerezni a PDF-et, és a react-pdf használatával megjeleníteni. Ezenkívül ki szeretném nyomtatni a megjelenített PDF-et.
Megpróbáltam konvertálni a response.data fájlt base64-re, ezt a sort követtem, mert nem sikerült: (ezzel elveszik a pdf tartalom) PDF kódolása base64-be ReactJS-ben
Kód, mint:
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);
});
}
Tud valaki valami javaslatot adni? Vagy van valami jobb módszer a célom eléréséhez?
Kösz
