React PDF 不在 IOS 15.5 中渲染 PDF答案

【问题标题】：React PDF not rendering PDF in IOS 15.5React PDF 不在 IOS 15.5 中渲染 PDF
【发布时间】：2022-10-09 07:25:01
【问题描述】：

我正在使用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 的网络视图中

pdf 开始渲染，但卡住，然后弹出画布错误，react-pdf 中有解决此问题的方法吗？

【问题讨论】：

标签： reactjs react-native react-native-webview react-pdf

【解决方案1】：

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

一个快速的解决方法是将renderMode 更改为svg，它只呈现SVG。

SVG 的加载时间比 Canvas 多一点。由于 Canvas 可以被用户查看，然后被绘制/渲染，而 SVG 在用户查看之前已经完全渲染。

这可能会破坏大型 PDF 或具有丰富图像内容的 PDF，因为渲染 SVG 将需要更长的时间来渲染

【讨论】：