How do I make the PDF responsive?

[nmyerson]

I am generating a PDF from firebase. On a PC it works great! Thank you!!!!!

When I have chrome pretend it's a phone... it doesn't look great. I can get the PDFView to be the proper size, but the contents of the iframe doesn't shrink to fit.

Is there a setting to make the content shrink to the size of the PDFViewer?

Thanks!

[coskuncakir]

Hello @nmyerson,
PDFViewer using iframe and I couldn't manage to make it responsive as you mentioned.
Instead, I've used another package with the same name to view it and set its width with useResizeObserver so it can adapt its width according to its container's width and it worked brilliantly
here is the package: https://www.npmjs.com/package/react-pdf

and here is how my preview component looks like

import React from 'react'
import Resume from '.'
import { usePDF } from '@react-pdf/renderer'
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`// i needed to import this too, don't remember exactly why but it might because i used nextjs, so you might not need to import this
import useResizeObserver from 'use-resize-observer'
import LinearProgress from '@mui/material/LinearProgress'

const Preview = ({ iconButton, ...props }: any) => {
  const [instance, updateInstance] = usePDF({
    document: <Resume />,
  })
  const [numPages, setNumPages] = React.useState(null)
  const { ref, width = 1, height = 1 } = useResizeObserver<HTMLDivElement>()

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages)
  }

  return (
    <div ref={ref}>
      <Document
        loading={<LinearProgress />}
        noData={<LinearProgress />}
        file={instance.url}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {[...Array(numPages)].map((_, index) => (
          <Page
            key={index}
            loading={<LinearProgress />}
            pageNumber={index + 1}
            width={width || undefined}
            renderAnnotationLayer={false}
          />
        ))}
      </Document>
    </div>
  )
}
export default Preview

[hiren3897]

Hello @coskuncakir @diegomura

Can we apply the styles by using innerRef to the HTMLIFrameElement

I want to apply custom css styles to the default scrollbars

can you tell me how I can acheive this please?

I already tried this

  const iframeRef = useRef() as React.MutableRefObject<HTMLIFrameElement>;

  useEffect(() => {
    if (iframeRef.current) {
      // Access the iframe content document
      const iframeDocument = iframeRef.current.contentDocument;
      if (iframeDocument) {
        console.log("yes");
        const style = document.createElement("style");
        style.textContent = `
          :hover::-webkit-scrollbar-thumb {
            visibility: visible;
          }
          iframe::-webkit-scrollbar {
            height: 0.5em;
            width: 0.5em;
          }
          ::-webkit-scrollbar-thumb {
            background-color: #4ed3b4;
            border-radius: 9999px;
            visibility: hidden;
          }
          ::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 9999px;
          }
          `;
        iframeDocument.head.appendChild(style);
      }
    }
  }, []);

MY TSX

const Report = ({ responses }: IReportResponse) => {
const filteredAsistanceResponses = responses.filter(response => response.role === "assistant");

return (
  <PDFViewer innerRef={iframeRef} style={styles.pdf}>
    <PDF content={filteredAsistanceResponses[filteredAsistanceResponses.length - 1]?.content} />
  </PDFViewer>
);
};

But it doesnt work