wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.
https://projects.wojtekmaj.pl/react-pdf
MIT License
9.24k stars 877 forks source link

Pdf Render Error, if any AdBlocker or VPN extension be activated in my browser. #1621

Closed Paiman-Rasoli closed 11 months ago

Paiman-Rasoli commented 11 months ago

Before you start - checklist

Description

Hi Guys, I have successfully rendered my PDF document using react-pdf but when I activate an ad blocker/VPN chrome extensions the PDF file will fail to render and the error code which I see in console is: net:ERR_BLOCKED_BY_CLIENT

The file is coming from s3. Why should add blockers or VPN extensions should be a problem for react-pdf?

Here is my code:

'use client';

import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

import { useState } from 'react';
import { Page, pdfjs, Document } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const options = {
  cMapUrl: 'cmaps/',
  cMapPacked: true,
  standardFontDataUrl: 'standard_fonts/',
};

interface PdfViewerProps {
  source: string;
}
interface PdfMeta {
  numPages: number;
  pageNumber: number;
  isLoaded: boolean;
}

export const PdfViewer = ({  source }: PdfViewerProps) => {

  const [pdfMeta, setPdfMeta] = useState<PdfMeta>({
    numPages: 0,
    pageNumber: 1,
    isLoaded: false,
  });

  const onDocumentLoadSuccess = () => {
    // set page number ..
  }

  return (
    <>
          <Document
            file={source} // https://storage-s3.com/file/fileName.pdf
            options={options}
            onLoadSuccess={onDocumentLoadSuccess}
          >
            <Page
              pageNumber={pdfMeta.pageNumber}
              scale={1.5}
              renderAnnotationLayer={true}
              renderTextLayer={true}
            />
          </Document>
    </>
  );
};

Steps to reproduce

Install any Ad blocker or VPN for chrome. Activate the extension and try to render the PDF document.

Expected behavior

I expect that AdBlocker or VPN should not cause error.

Actual behavior

Throws net:ERR_BLOCKED_BY_CLIENT

Additional information

No response

Environment

wojtekmaj commented 11 months ago

Your ad blocker blocking network requests is not React-PDF concern. If you think some requests are mistakenly blocked, report it to whoever created the rulesets.