进来的你肯定经历了下面的折磨
按照我们的测试结论,大部分问题是出现在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`;
②把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>
参考:
react-pdf在部分iOS手机上加载pdf失败问题解决
react-pdf: 在你的React应用程序中显示PDF,就像它们是图像一样容易。
一点思考:
- 最开始测试的时候没问题,一上线出了问题很烦躁,看到了 react-pdf在部分iOS手机上加载pdf失败问题解决
,才心情缓和点,开始按照作者的方式进行处理。 - 虽然作者的方式并没有很好的指引我,但是坚定了我解决问题的信息,直到我看到了react-pdf: 在你的React应用程序中显示PDF,就像它们是图像一样容易。。
- 当我看到 file可以是URL、base64内容、Uint8Array 等等。
这句话,我如梦初醒,茅塞顿开,url请求势必会出现问题,何况内部pdf处理还需要时间,不如直接给他把资源请求过来转为base64,在交给组件处理。 - 果然解决了。
附录:
使用react-pdf或jspdf后文件中的部分文字和签名无法展示
查看公众号信息: