React PDF在iOS 15.5中不渲染PDF

Question

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

PDF渲染在Android中起作用。

在iOS中，我得到此错误总帆布内存使用超过最大限制（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和将其存储为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

pdf开始呈现，但请获取卡住，然后弹出帆布错误，是否有修复此问题在react> react-pdf

Answer 1

iOS防止为这种内存绘制画布。“总帆布内存使用超过最大限制（384 MB）。”因此，React PDF无法绘制图像。

快速修复将是将rendermode更改为svg，它只是呈现SVG。

SVG比画布需要更多的时间来加载。由于可以向用户查看画布，然后绘制 /渲染，而在用户可以查看之前，将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>