Mobile view does not print according to the width of the paper

[jeynergil]

Hi, This is a great package. Works well on desktop. How do I configure this so that even when using mobile, it will still print the full width?

Thanks! Great work!

[ivmarcos]

Hi @jeynergil, thanks for the feedback! Could you provide a reproducible example (codegen or any other) so it can be tested out?

[jeynergil]

Thank you for your reply. I saw this on the internet: https://codesandbox.io/s/ancient-violet-sznj9q?file=/src/App.tsx

Is this possible that it should autofit to the entire width of the pdf?

[ivmarcos]

Got it, that feature does not exist at the moment, but is something planned to be implemented soon. In the meantime, a way around would be changing the component style itself, increasing its width, for instance.

[jeynergil]

Thanks. Can you please elaborate on "changing the component style itself?

[ivmarcos]

Please check out this forked codesandbox from the original, spanning to the full available width of the page: https://codesandbox.io/s/awesome-feather-pz4868?file=/src/App.tsx. In this case, I've set the width of the Container component to 800px.

[jeynergil]

Got it. Brilliant 👌 Maybe that would do. Thank you @ivmarcos

[jeynergil]

Got it, that feature does not exist at the moment, but is something planned to be implemented soon. In the meantime, a way around would be changing the component style itself, increasing its width, for instance.

@ivmarcos would love to try it out right away once the feature is implemented 👌

[ivmarcos]

I hear you, hopefully this won't take long to implement 🤞 , I'm already working on it. I'll ping here back when done.

[jeynergil]

Brilliant👍

[raulzc3]

I post thist just because it might be usefull while we wait for the real feature.

I am working on a small react app for pc and mobile devices but the resulting pdf needs to be in A4 format. In PC this is not big deal since the content of the document can be just like a regular A4, but not in mobile devices.

My workaround is having a preview the size according to the device and a full size A4 view hidden at the bottom of the page (outside of the viewport) with display none at all times but the moment of the download, when it changes to display block just for that. It works like a charm!

Code (in this case, the content of the pdf would be passed as children to this component):

 import {
  Button,
  Center,
  Container,
  Group,
  Loader,
  Paper,
} from "@mantine/core";
import { useEffect, useState } from "react";
import { usePDF } from "react-to-pdf";
import moment from "moment/moment";

export default function PdfDownloader({ children, setData, type }) {
  const filename = type + "_" + moment().format("YYYY-MM-DD") + ".pdf";
  const { toPDF, targetRef } = usePDF({ filename: filename });
  const [downloading, setDownloading] = useState(false);

  useEffect(() => {
    if (downloading) {
      toPDF();
      setDownloading(false);
    }
  }, [downloading]);

  return (
    <div>
      <Group gap="xs" justify={"space-between"} grow>
        <Button
          onClick={() => {
            setData(null);
          }}
          variant="default"
        >
          Back
        </Button>
        <Button
          onClick={() => {
            setDownloading(true);
          }}
        >
          {downloading ? (
            <Loader color="rgba(255, 255, 255, 1)" size="xs" />
          ) : (
            "Download"
          )}
        </Button>
      </Group>
      <Paper shadow="xl" p={"xs"}>
        <Center>{children}</Center>
      </Paper>

      <div
        style={{
          position: "absolute",
          top: 2000,
          display: downloading ? "block" : "none",
        }}
      >
        <Container
          ref={targetRef}
          style={{
            width: "210mm",
            height: "290mm",
          }}
        >
          <Center style={{ padding: "25mm" }}>{children}</Center>
        </Container>
      </div>
    </div>
  );
}

[ajmalaPiacademy]

I hear you, hopefully this won't take long to implement 🤞 , I'm already working on it. I'll ping here back when done.

Is that completed?