What should I do if react does not display PDF generation information?

The solution to the problem that react does not display the PDF generation information: 1. Get the url address of the pdf from the background, and then request the pdf file; 2. Set the responseType to blob when requesting the pdf file; 3. Change the PDF Convert the file to base64 format; 4. Use canvas to render the PDF.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if react does not display PDF generation information?

Solving the problem of PDF display and printing in react projects

There is such a requirement in the recent project:

• PDF can be displayed on the page

• If you don’t want to print out the entire page and only print the part that displays the PDF, you can use the browser’s built-in printing function

Display of PDF files

I was really confused when I got this requirement. Since I have never done anything similar, I don’t know where to start. In the process of checking the information, I found that there are many jQuery plug-ins that can display PDF, but we are a react single-page application project. It seems that these plug-ins are not suitable and we can only find other methods.

Later I found the react-pdf-js component on npmjs.com and thought it would be possible to display pdf. I can't wait to install the react-pdf-js dependency into the project through the cnpm install react-pdf-js --save-dev command, and introduce it into the project through import PDF from 'react-pdf-js'. Insert into render.

During the debugging process, it was found that static pdf files can be displayed, but online pdf files cannot. Through the control error message, we know that the react-pdf-js component requires the file address to be in URL or base64 format. Since the URL does not work, we can only rely on base64.

Get the PDF file

At the beginning, I directly converted the online address URL of the PDF to base64, but it could not be displayed. Later I figured out that it is useless to just convert the url to base64 format. You need to convert the pdf file content into base64. Next, it is logical to request the pdf file again through the url address of the pdf obtained from the background.

I encountered a small problem when doing this part: the request was successful, but the pdf file could not be obtained. I struggled with this for a long time and didn’t know how to solve it. I described the problem to our company’s architect. , we analyzed that this was caused by a cross-domain problem, and he configured the nginx server to solve the cross-domain problem.

'Content-Type':  'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': 'https://www.nurse-go.cn:9091',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'X-Custom-Header',
'Access-Control-Allow-Credentials': true,

Convert PDF files to base64 format

base64 can store files in any format, a great storage method. Convert the file to base64 format.

It should be noted here that when requesting a pdf file, the responseType must be set to blob. Why the blob type is used is explained below. At this point, I got the pdf file and converted it into base64 format.

let reader  = new FileReader()
let fileParts = []
fileParts.push(this.props.pdfFile)
let blob = new Blob(fileParts, {type : 'application/pdf'})
if (blob) {
    reader.readAsDataURL(blob)
}
let base64
let that = this      // 处理this的指向  
reader.addEventListener("load", function () {
    base64 = reader.result
   that.setState({
          base64: base64,
 })
}, false);

Conversion of base64 format, if necessary, blob format will be converted into pdf in base64 format, and will be displayed on the browser in file={file}. In fact, it is ultimately a PDF presented in canvas.

The pdf display has come to an end, and the next step is printing.

Printing of PDF files

On the browser, printing is divided into full page printing and specified part printing. The project needs to print part of the content. There are many ways to achieve printing. I used traditional CSS control. Use @media print to hide the parts that do not need to be printed, and then the rest is the part that needs to be printed.

PDF file printing debugging

Here is a little debugging tip: because the style in @media print will be called only when the browser's print is called, so You can put this part of the style outside. When the parts that don't need to be printed are hidden, then remove these external styles and print them to @media.

Call the window.print() used by the browser for printing. Although it is not compatible with all browsers, common advanced browsers are compatible and meet our project needs. I will not continue to dig deeper here. .

The display and printing of pdf have encountered many problems. The above flow is a summary.

Recommended learning: "react video tutorial"

The above is the detailed content of What should I do if react does not display PDF generation information?. For more information, please follow other related articles on the PHP Chinese website!