React PDF在IOS 15.5中不显示PDF

Question

我使用react-pdf在react应用程序中渲染pdf，然后通过WebView在ios和android中渲染。

pdf渲染在android中工作。

在ios，我得到这个错误Total canvas memory use exceeds the maximum limit (224 MB).

<Document
file={pdfBlob}
onLoadSuccess={onDocumentLoadSuccess}
renderMode="canvas"
loading={<AppLoader />}
>
<Page
object-fit="fill"
pageNumber={currentPage}
width={isMobile && 350}
loading={<AppLoader />}
onRenderSuccess={() => {
setPdfRenderLoading(false);
}}
renderTextLayer={false}
/>
<IconWrapper isMobile={isMobile}>
<IconButton
disabled={!canGoToPrev()}
colorScheme="blue"
aria-label="go-previous"
icon={<ChevronLeftIcon fontSize={fontSizes.md} />}
backgroundColor={appColors.brandGrey['50']}
color={appColors.brandGrey['900']}
mr={2}
onClick={handlePrevPage}
/>
<AppText title={`${currentPage} of ${totalPages}`} />
<IconButton
disabled={!canGoToNext()}
colorScheme="blue"
aria-label="go-next"
icon={<ChevronRightIcon fontSize={fontSizes.md} />}
backgroundColor={appColors.brandGrey['50']}
color={appColors.brandGrey['900']}
ml={2}
onClick={handleNextPage}
/>
</IconWrapper>
</Document>

我正在从s3获取pdf并将其存储为blob，以防止每次页面渲染器读取

我的依赖

"dependencies": {
"@chakra-ui/icons": "^1.1.7",
"@chakra-ui/react": "^1.8.8",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@fontsource/nunito": "^4.5.8",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"chakra-react-select": "^3.3.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-unused-imports": "^2.0.0",
"framer-motion": "^6",
"prettier": "^2.6.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-pdf": "^5.7.2",
"react-query": "^3.38.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"use-debounce": "^8.0.1",
"web-vitals": "^2.1.4",
"zustand": "^4.0.0-rc.1"
}

使用react-native-webview

将整个块显示在webview中pdf开始渲染，但得到卡，然后画布错误弹出，是否有修复这个在react-pdf

Answer 1

IOS会阻止为这样的内存绘制画布。"Total canvas memory use exceeds the maximum limit (384 MB)."因此React PDF无法绘制图像。

一个快速的解决方案是将renderMode更改为svg，这只是渲染SVG。

SVG比Canvas需要更多的时间来加载。因为Canvas可以被用户查看，然后被绘制/渲染，而SVG在用户可以查看之前被完全渲染。

对于大型pdf或具有丰富图像内容的pdf来说，这可能是一个问题，因为渲染svg将花费更长的时间来渲染

<Document
file={pdfBlob}
onLoadSuccess={onDocumentLoadSuccess}
renderMode="svg" // Changed
loading={<AppLoader />}
>
<Page
object-fit="fill"
pageNumber={currentPage}
width={isMobile && 350}
loading={<AppLoader />}
onRenderSuccess={() => {
setPdfRenderLoading(false);
}}
renderTextLayer={false}
/>
<IconWrapper isMobile={isMobile}>
<IconButton
disabled={!canGoToPrev()}
colorScheme="blue"
aria-label="go-previous"
icon={<ChevronLeftIcon fontSize={fontSizes.md} />}
backgroundColor={appColors.brandGrey['50']}
color={appColors.brandGrey['900']}
mr={2}
onClick={handlePrevPage}
/>
<AppText title={`${currentPage} of ${totalPages}`} />
<IconButton
disabled={!canGoToNext()}
colorScheme="blue"
aria-label="go-next"
icon={<ChevronRightIcon fontSize={fontSizes.md} />}
backgroundColor={appColors.brandGrey['50']}
color={appColors.brandGrey['900']}
ml={2}
onClick={handleNextPage}
/>
</IconWrapper>
</Document>