PDFViewer not working in mobile browsers?

[jhilden]

Describe the bug

It seems that displaying a PDF document inside the <PDFViewer> component is not working on mobile browsers (tested with Chrome and Firefox on Android).

To Reproduce

I created a simple demo create-react-app with the example PDF document from the react-pdf getting started guide: https://github.com/jhilden/react-pdf-demo

Expected behavior

That the PDF is rendered and displayed just like in desktop browsers.

Screenshots

Chrome 76.0.03809.132 on Android

Clicking on the "Open" button will just open a new blank tab.

Firefox 68.1 on Android

react-pdf version 1.6.4

Is this a known issue? If yes, it should probably be documented here https://react-pdf.org/components#pdfviewer And in that case it would be good to know how to test if the current environment supports PDFViewer. So one could e.g. use <PDFDownloadLink> instead, which is working fine in the those mobile browsers.

Or is this a bug that should normally be working?

[jhilden]

I tinkered around a bit with PDFViewer and when you return an <object> with the PDF as base64 in the data attribute (instead of <iframe> + blob url), it will still not display the PDF in mobile Chrome, but at least the "Open" button will work correctly now. It still works in desktop browsers, but not in mobile firefox.

This would the changed render method of PDFViewer:

<InternalBlobProvider document={children}>
      {({ base64 }) => (
        <object 
          data={base64}
          type="application/pdf"
          {...props}
        />
      )}
</InternalBlobProvider>

[jhilden]

In implementing a solution in our app that falls back nicely on devices that do not support PDFViewer I used the logic from the PDFObject library which solves the same problem, see: https://github.com/pipwerks/PDFObject/blob/master/pdfobject.js#L94 Unfortunately it's not really straightforward and you need to combine browser and feature-detection.

Would you consider merging a PR with equivalent code? Something like PDFViewer.supported? Or would you rather merge a PR with a little bit of documentation about the compatibility of PDFViewer?

[oluwadareseyi]

Hi, please how did you solve this issue? I didn't really get what you posted.

[acomito]

Also having an issue with mobile

[mhanley00]

I am having issues in Safari as well- the html elements that make up the React-PDF grey bar with Rotate/Download/Print actions do not show up inside the iframe in Safari (but do in Chrome, Firefox etc). For example:

Inside iframe on Chrome:

Inside iframe on Safari:

I am also unable to use the Safari-native buttons to print/download/open in Preview, but there are no console errors. Does anyone have any solutions for this?

[BalajiKumar92]

me too facing the same issue with PDFViewer. It is working as expected in web browser(computer) but it is not working in mobile browser. Getting button with label 'open' without any action.

[tejesh014]

Facing the same issue on mobile browsers. PDFViewer isn't working as expected.

[karan2227]

Is this URL server side rendered or client side? https://react-pdf.org/repl Because this seems to be working in mobile browsers.

[ludovv]

I was facing the same problem on mobile, and idk if it's the best way, but im using https://github.com/wojtekmaj/react-pdf to generate the preview of my PDFs on desktop and mobile.

[acomito]

@ludovv Do you have a snippet of what it looks like?

Are you using wojtekmaj/react-pdf entirely or both libraries?

[ludovv]

@ludovv Do you have a snippet of what it looks like?

Are you using wojtekmaj/react-pdf entirely or both libraries?

Using both. It's something like this:

Document and Page are from wojtekmaj/react-pdf, you can scale your pdf, select render mode and add a pagination, etc

[acomito]

Thanks @ludovv this is helpful.

So wojtekmaj/react-pdf doesn't have a PDFViewer it seems.

I'm trying to render something like a PDF viewer on mobile

[ludovv]

Thanks @ludovv this is helpful.

So wojtekmaj/react-pdf doesn't have a PDFViewer it seems.

I'm trying to render something like a PDF viewer on mobile

Check this: https://github.com/forthealllight/react-read-pdf

[ekinclonk]

i got the same issue, how to solve it ? I am using next.js

[JessyZeroual]

Hi, i am having the same problem, anyone have a solution?

[fallenmel]

any work around on this

[rhadamez]

Hey guys, I'm testing some libs to generate PDF, and this lib looks great, but I just got this bug. I think it happens because the pdf is rendered inside some component, if it could be rendered somehow in a new tab as pure pdf, maybe this could fix the issue.

[sid4861]

Did anyone get the solution of the issue ? unable to render or download PDF from chrome on android

[diegomura]

Unfortunately this is caused by mobile browsers not being able to render PDFs as a desktop browser usually does. In the near future I have plans to upgrade the PDFViewer component so it can render SVG docs, but it's currently not possible. I can fallback to a download button if mobile browser detected, but this might not suit all the possible use cases as well.

I think it might be better to leave this to each one to decide on their app based on their needs. usePDF can be used and based on desktop or browser, each can render either an iframe or a download link for mobile (or whatever suits your app best). Thoughts?

[Mario8419]

mobile possibility would be a milestone. think that a lot of people just waiting to see this feature

[diegomura]

@Mario8419 agree! I didn't meant it wasn't something I wanted to do (building an SVG doc renderer with 2.0 should be doable) but rather proposed a temporary solution while I find some time to work on this :)

[TheNew000]

Hey everyone. I just resolved this bug for my company and I am not sure if this is the same problem for you. We found that the popup blocker was preventing the pdf from appearing. You have to allow popups for your page in order for the pdf to appear. Not sure if this will help anyone else.

[ronaldaraujo]

I'm having the same problem...

[ludovv]

I'm having the same problem...

Use https://github.com/wojtekmaj/react-pdf to display it.

[ronaldaraujo]

Thank you for tip, @ludovv. But I solved my problem with react-device-detect. That is, when a mobile I show custom modal for download.

[TheoOliveira]

Thank you for tip, @ludovv. But I solved my problem with react-device-detect. That is, when a mobile I show custom modal for download.

Dude @ronaldaraujo , can you share how did you implemented? I am also having this issue and I started to use your idea to do it and according to the docs but it shows previous image

import React, {useEffect, useState} from 'react'
import { PDFViewer, PDFDownloadLink } from '@react-pdf/renderer';
import MyDocument from '../../components/generatedFile'
import { useAuth } from '../../config/useAuth';
import {isMobile, isBrowser} from 'react-device-detect';

export default function Exame() {
const { user, isAdmin, isNurse } = useAuth();

  const styles  =  {
    height: '100vh',
    width: '100vw'
  }

   if(user || isAdmin || isNurse && isBrowser){
      return (
          <div>
              <PDFViewer style={styles} >
                  <MyDocument />
              </PDFViewer>
          </div>
      )
  }
  if(user || isAdmin || isNurse && isMobile){
    return (
      <>
      <PDFDownloadLink document={<MyDocument/>} fileName="exame-covid.pdf">
      {({ blob, url, loading, error }) =>
        loading ? 'Gerando seu exame...' : 'Baixe agora!'
      }
      </PDFDownloadLink>
      </>
    )
  }
}

[ronaldaraujo]

Sure, @TheoOliveira. Below is the code I implemented.

Device component

import { ReactNode } from 'react';
import * as rdd from 'react-device-detect';

type DeviceProps = {
  children: (props: typeof rdd) => ReactNode;
};

export default function Device(props: DeviceProps) {
  return <div className="device-layout-component">{props.children(rdd)}</div>;
}

Report

<Device>
      {({ isMobile }) => {
        if (isMobile) {
          return (
            <PDFDownloadLink
              document={<MyDocument deas={deas} />}
              fileName="YOUR_FILE_NAME"
            >
              {({ loading }) =>
                loading ? "Loading...": <ModalPDFGenerated />
              }
            </PDFDownloadLink>
          );
        }
        return (
          <PDFViewer style={{ width: '100%', height: '100vh' }}>
            <MyDocument .../>
          </PDFViewer>
        );
      }}
    </Device>

ModalPDFGenerated and MyDocument are external components that are part of the implementation. But I believe the central idea is this. Hope this helps. Hug.

[SHIVAM-GOUR]

The 'PDFViewer' from 'react-pdf' package is not working (to show pdf) in mobile view in my Nextjs project!

please share the solution if anybody has figured out...

[NikhilAgarwal05]

In the 'PDFviewer' from react package,the pdf words disappear in pdf viewer

[ronaldaraujo]

In the 'PDFviewer' from react package,the pdf words disappear in pdf viewer

How is your code?

[NikhilAgarwal05]

@ronaldaraujo Here is the code to view pdf in an application:-

<Document file={props.pdf} options={{ workerSrc: "/pdf.worker.js" }} onLoadSuccess={onDocumentLoadSuccess} onPassword={onPassword}

{Array.from(new Array(numPages), (el, index) => ( <Page key={page_${index + 1}} pageNumber={index + 1} /> ))}

[ronaldaraujo]

@ronaldaraujo Here is the code to view pdf in an application:-

<Document file={props.pdf} options={{ workerSrc: "/pdf.worker.js" }} onLoadSuccess={onDocumentLoadSuccess} onPassword={onPassword} > {Array.from(new Array(numPages), (el, index) => ( <Page key={page_${index + 1}} pageNumber={index + 1} /> ))}

I don't see any problem with your code. But, I didn't understand the file pdf.worker.js.

[CodeMaestro11]

same for me.

[MuriloBarranco]

+1

[Jasermon]

Any progress? I am having a similar problem in my nextjs project. Everything is fine on desktop but PDFViewer doesn't work on mobile devices.

[Andreamoon]

Still not update ?

[Nadir123649]

if still facing the issue and getting stuck when using this on android devices. any help regarding this.

[lunaticcoding]

how can this still be an issue? been open for over 3 years and is obviously very relevant functionality.....

[Mario8419]

@diegomura Are there any roadmap for PDFViewer component so it can render SVG docs?

[joziasmartini]

I'm having the same issue with Next v14.

It's a little disappointing that a satisfactory solution doesn't exist yet.

[agus4402]

it worked for me this way:

i used react-pdf to show the pdf file and react-pdf/renderer to create the pdf

im working in nextjs so i had to add this in next.condig,mjs:

webpack: (config) => {
        config.resolve.alias.canvas = false;
        return config;
    }

pdf viewer component that i made:

"use client";

import {
  BlobProvider,
} from "@react-pdf/renderer";
import { Document, Page, pdfjs } from "react-pdf";

//I added this imports to add suport to textLayer and anotations
import "react-pdf/dist/Page/AnnotationLayer.css";
import "react-pdf/dist/Page/TextLayer.css";

//this due a Worker not found error
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url
).toString();

type Props = {
  document: any;
  filename?: string;
  isLoading?: boolean;
  className?: React.CSSProperties | string;
};

const LoadingScreen = () => (
  <div className="pt-10">
    <Spinner color="default" />
  </div>
);

const PdfExport = (props: Props) => {
  const parentRef = React.useRef<HTMLDivElement>(null);

  return (
    <div id="pdf" ref={parentRef} className={props.className + ""}>
      <BlobProvider document={props.document}>
        {({ blob, url, loading, error }) =>
          loading ? (
            <LoadingScreen />
          ) : (
            <Document file={url} loading={loading ? <LoadingScreen /> : null}>
              <Page
                loading={loading ? <LoadingScreen /> : null}
                pageNumber={1}
                error={"Error"}
                width={parentRef.current?.clientWidth}
              />
            </Document>
          )
        }
      </BlobProvider>
    </div>
  );
};

export default PdfExport;

[adel121]

Same issue here...

[San-Zer0-786]

Why is this package recommended when it is missing this key feature....

[danrleyney2210]

I found the solution for this problem. you guys can use this, it will definitely work. Put on the pdf link in properts -> data and also where have 'link here'

<object width="100%" height="480" data={link_here} type="application/pdf"

<iframe src={https://docs.google.com/viewer?url=${link_here}&embedded=true} width="100%" height="480"

[byron-ojua]

I would also like to upvote this issue. It is unfortunate there is not a fix for this yet. For anyone who is looking for at least a partial solution to display at least something, this seems to work a little.

  <PDFDownloadLink document={<PDFFile />} fileName={"document.pdf"}>
      Download PDF
  </PDFDownloadLink>

[M-Danish-J]

Is this URL server side rendered or client side? https://react-pdf.org/repl Because this seems to be working in mobile browsers.

This is custom pdf , we need to open from url

[xvimnt]

byron

TypeError: dispatcher.useSyncExternalStore is not a function

in Next 14