I created a HTML doc using the react-pdf/render package and followed the steps mentioned in the documentation. However, when trying to download my component, I am facing an issue with downloading the correct PDF in a properly aligned way. This may be because my CSS properties are not applying while trying to download, but while rendering the PDF, I can see the correct result on the UI. I am only facing this issue while trying to download and save it as a PDF. I am attaching the code and the screenshots to provide better clarification.
Note that PDFDownloadLink is used for downloading, as there was an issue with the alignment of the PDF when downloaded. To check the UI, I used ReactPDF.render and found that the UI was good.
package URL: https://www.npmjs.com/package/@react-pdf/renderer?activeTab=code
{/* <PDFDownloadLink
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
document={}
fileName="HistoryBlankReport.pdf"
>
{({ loading }) =>
loading ? "Loading document..." : "Download All"
}
*/}
ReactPDF.render(
, ${__dirname}/example.pdf);
styleSheet: const styles = StyleSheet.create({ body: { borderTop: 10, maxWidth: "1280px", }, maxwidth7xl: { maxWidth: "1280px", padding: "0px 20px 0px 20px", margin: "0px auto 0px auto", }, )}
