Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome 76 cannot work normally #1859

Open
4 tasks done
ZtfCoder opened this issue Aug 24, 2024 · 5 comments
Open
4 tasks done

Chrome 76 cannot work normally #1859

ZtfCoder opened this issue Aug 24, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@ZtfCoder
Copy link

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I use react-pdf 6.2.2 but Chrome 76 cannot work normally

Chrome 76 cannot work normally

image

image

Steps to reproduce

no

Expected behavior

Normal display

Actual behavior

Normal display

Additional information

No response

Environment

  • Browser (if applicable): chrome 76.0.3809.100
  • React-PDF version: 6.2.2
  • React version: react 17
  • Bundler name and version (if applicable):next 12
@ZtfCoder ZtfCoder added the bug Something isn't working label Aug 24, 2024
@wojtekmaj
Copy link
Owner

I don't have access to your app, so the message you provided doesn't allow me to understand which line it's crashing on.

@ZtfCoder
Copy link
Author

I don't have access to your app, so the message you provided doesn't allow me to understand which line it's crashing on.

Hello, I tried again and imported compatible ones according to the document pdfjs-dist/legacy/build/pdf.worker.min.mjs, But I am on Vite's local system, and the error message is still mine

image
image

is chrome 87
"react-pdf": "6.2.2",
I went to check the source code and found that it might be this code
image

This compatibility card has been stuck for a long time. If possible, could you please take a look at this issue? Thank you 🙏

@ZtfCoder
Copy link
Author

/**
 * @Date: 2024-06-27 11:42:43
 * @Description: PDF预览
 * https://github.com/wojtekmaj/react-pdf/blob/v6.x/README.md
 */

import { useState } from "react";
import styles from "./index.module.scss";
import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
import { getYPCdnImgUrl } from "@yp/core/config";
import React from "react";
// pdfjs.GlobalWorkerOptions.workerSrc = getYPCdnImgUrl("wp/pdf.worker.min.js");
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
console.log(pdfjs.GlobalWorkerOptions.workerSrc);

const Loading = (props: { text?: string }) => {
  const text = props.text || "正在加载中";
  return (
    <div className={styles.loading}>
      <img src={getYPCdnImgUrl("wp/file_loading.svg")} alt={text} />
      <div className={styles.text}>{text}</div>
    </div>
  );
};

const PdfView = ({ url, width, ...other }: { url: string; width?: number }) => {
  const [numPages, setNumPages] = useState(0);
  const [pagesToRender, setPagesToRender] = useState([1]);

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages);
    setPagesToRender([1]); // 初始化时只渲染第一页
  };

  const loadMorePages = () => {
    setPagesToRender((prevPages) => {
      const nextPage = prevPages.length + 1;
      if (nextPage <= numPages) {
        return [...prevPages, nextPage];
      }
      return prevPages;
    });
  };

  return (
    <Document
      file={url}
      onLoadSuccess={onDocumentLoadSuccess}
      options={{
        cMapUrl: "https://cdn.yupaowang.com/yupao_hybrid_h5/pdf-cmaps/cmaps/",
        cMapPacked: true,
      }}
      className={styles.pdfBox}
      loading={<Loading />}
      error={<Loading text="预览失败,请稍后重试" />}
      {...other}
    >
      {pagesToRender.map((pageNumber) => (
        <Page
          key={`page_${pageNumber}`}
          onRenderSuccess={() => {
            loadMorePages();
          }}
          pageNumber={pageNumber}
          className={styles.page}
          width={width || 687}
          loading={<></>}
        />
      ))}
    </Document>
  );
};
export default PdfView;

@ZtfCoder
Copy link
Author

image
I may already know why, it's because this tools.js uses the Array at method, but this method only supports Chrome 96 and above. How can I be compatible with this

@ZtfCoder
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants