Regarding React-file-viewer previewing pdf files, the problem that the file is too large cannot be displayed
Because the business needs the online preview function, I use the react framework. I found the React-file-viewer package in npm, learned about its use, and found that the function and difficulty are quite suitable.
The method of use is quite simple, just download the package npm.
import FileViewer from 'react-file-viewer';
<FileViewer fileType={
type} filePath={
file} />
fileType is the type of file, theoretically supports: jpg, png, gif, docx, pdf, jpeg, xlsx files, but in the actual test, the support for xlsx is not very good, garbled characters may appear.
filePath is to pass in the file source, it can be a Url link, it should support Base64 file stream, forgot.
At the time of testing, except for the xlsx file, the above-mentioned other files were displayed well, but when displaying the Pdf file, the following error was displayed:
Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').
At that time, the function was ok, and there was no size test for the file, and there was no size limit on the front end, so the test went online.
Recently, users have reported that the uploaded pdf file cannot be previewed, and the file size is 3.45M. I got the pdf uploaded by the user for testing, and the local environment does not display it.
At first I thought it was
caused by 1. The Chinese name of the file, but it still couldn’t be displayed after changing the name.
2. The modified pdf file is a "serious" Pdf file for monitoring the PDF file.
3. The size of the file, compress the pdf file, compress it to 1.23M, upload it and find that the Pdf file is damaged. . .
4. I took my own file with a size of 1.45M for testing, and it was displayed
But even if it is displayed, the console still reports the above error.
At first, I thought that it was necessary to use additional js to load the package, because it is a single-page application, if the extra js sends a request on the current domain name, it is destined to take a local route, and it is normal that it cannot be accessed.
But the actual situation is that no specific js request is sent at all, and there is no description of this aspect on npm.
To view the source code of React-file-view: For the preview function of pdf, the approximate implementation is to transcode the source of pdf through a method, inject it into the newly created Canvas in a specific way, and realize the preview of pdf by displaying canvas .
Can't see where the problem is. . .
Instead of thinking about how others wrote it here, it is better to look for other component packages. After all, React-file-view is also a product of 2007, and the last update was 2 years ago.
There are many types to choose from for specific preview Pdf files. Fancy React-pdf
A toolkit with tens of thousands of downloads per week.
The method of use is still so simple.
import {
Page } from 'react-pdf';
import {
Document } from 'react-pdf/dist/esm/entry.webpack';
<Document
file={
file}
onLoadSuccess={
this.onDocumentLoadSuccess}
>
<Page pageNumber={
pageNumber} />
</Document>
Note : Page and Document are referenced separately. If they are referenced directly from react-pdf, the problems I mentioned above may occur. Those who are interested can try it out.
onLoadSuccess accepts a function, and the default parameter returns the page number, that is, the total number of pages in this pdf.
pageNumber accepts a Number, let it display the first page.
By managing the Number in the state, the operation of the previous page and the next page can be realized.
There is also a good adaptation to the size of the file, at least up to 10M is no problem.
Perform a branch process in React-file-view, and process the pdf file separately.
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
You thought it was over, but it wasn't. . . There was another problem when packaging with webpack.
How to solve it is left in the next article. tired!
^ - ^