Ask Your Question
0

In the `react-pdf` library using tailwind, what is the process to adjust the size (both height and width) of the displayed PDF?

asked 2022-04-17 11:00:00 +0000

bukephalos gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2022-10-18 20:00:00 +0000

qstack gravatar image

To adjust the size (both height and width) of the displayed PDF in react-pdf library using Tailwind, you can set the CSS value for the width and height properties of the Document component. For example, if you want to set the PDF size to be 50% of the screen width and height, you can do the following:

import React from 'react';
import { Document, Page } from 'react-pdf';
import 'tailwindcss/tailwind.css';

export default function MyApp() {
  return (
    <div className="w-screen h-screen flex justify-center items-center">
      <Document file="example.pdf" className="w-1/2 h-1/2">
        <Page pageNumber={1} />
      </Document>
    </div>
  );
}

In the above code snippet, the w-1/2 and h-1/2 classes from Tailwind are applied to the Document component, which sets the width and height to 50% of its container. You can adjust these values to change the size of the PDF as per your requirements.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2022-04-17 11:00:00 +0000

Seen: 12 times

Last updated: Oct 18 '22