reactjs React PDF无法在IOS 15.5中呈现PDF

iswrvxsc 于 2023-02-08 发布在 React

关注(0)|答案(1)|浏览(298)

我使用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中是否有此修复程序

reactjs

来源：https://stackoverflow.com/questions/72432885/react-pdf-not-rendering-pdf-in-ios-15-5

1条答案

按热度按时间

k3fezbri1#

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>

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs React PDF无法在IOS 15.5中呈现PDF

1条答案

相关问题

热门标签

最新问答