react-pdf: PDFViewer not working in mobile browsers?

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.

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

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?

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

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

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?

@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 😃

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

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

I’m having the same issue with Next v14.

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

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>
      </>
    )
  }
}

@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