react-pdf(Failed to load PDF file) react h5嵌入app展示pdf失败解决

进来的你肯定经历了下面的折磨

按照我们的测试结论，大部分问题是出现在ios手机上的。
直接上结论：
① 增加 pdfjs 线程GlobalWorkerOptions的地址

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
1
2

②把pdf地址由url转为base64 再塞给组件，降低组件内部因pdf资源获取问题导致渲染失败的概率；

const blobToBase64 = (blob) => {
        return new Promise((resolve, reject) => {
          const fileReader = new FileReader();
          fileReader.onload = (e) => {
            resolve(e.target.result);
          };
          // readAsDataURL
          fileReader.readAsDataURL(blob);
          fileReader.onerror = () => {
            Toast.show('blobToBase64 error')
            reject(new Error('blobToBase64 error'));
          };
        });
      }

    const fetchUrl = (pdfUrl) => {
        fetch(pdfUrl)
        .then((response) => response.blob())
        .then((res) => {
            let blob = new Blob([res],{type: 'application/pdf'});
            const fileURL = URL.createObjectURL(blob)
            // window.open(fileURL)
            blobToBase64(blob).then(res=> {
                setUrl(res)
                // console.log(res)
            }).catch(err => {
                Toast.show('文件解析失败，请返回重试')
            })
        })
    }
    
    useEffect(() => {
        function getPdfUrl() {
            let pdf = `${state.appData?.pdfUrl}`
            fetchUrl(pdf)
        }
        getPdfUrl()
        return () => {
        }
    }, [state.appData?.pdfUrl]);

      <Document
          file={url} // 文件地址
          className="pdf-viewer-show"
      >
          {Array.from(new Array(numPages), (el, index) => (
              <Page
                  key={`page_${index + 1}`}
                  pageNumber={index + 1}
                  renderAnnotationLayer={false}
                  renderTextLayer={false}
              />
          ))}
      </Document>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

参考：
react-pdf在部分iOS手机上加载pdf失败问题解决

react-pdf: 在你的React应用程序中显示PDF，就像它们是图像一样容易。
一点思考：

1. 最开始测试的时候没问题，一上线出了问题很烦躁，看到了 react-pdf在部分iOS手机上加载pdf失败问题解决
   ，才心情缓和点，开始按照作者的方式进行处理。
2. 虽然作者的方式并没有很好的指引我，但是坚定了我解决问题的信息，直到我看到了react-pdf: 在你的React应用程序中显示PDF，就像它们是图像一样容易。。
3. 当我看到 file可以是URL、base64内容、Uint8Array 等等。
   这句话，我如梦初醒，茅塞顿开，url请求势必会出现问题，何况内部pdf处理还需要时间，不如直接给他把资源请求过来转为base64，在交给组件处理。
4. 果然解决了。

附录：
使用react-pdf或jspdf后文件中的部分文字和签名无法展示

查看公众号信息：