React-pdf/render.

[nelsonmandeladev]

I am making an app with react js that allows users to create resumes, preview, and then download in pdf format. so I found the react-pdf/render module for this task. I have successfully installed the module and configured it. There is some small problem that I can't solve unfortunately such as:

------Change the Width of the PDFViewer without affecting the height and vice versa
-----I would also like to be able to remove the gray-colored background on <PDFViewer /> and also set some properties of the <Page/> section such as giving it rounded borders, the box-shadow also for display in the Dom but not for downloading.

------Another major problem is that when I set the page size for example to A4, react compiles it displays fine, but when I come back I change for example to A3 I can't more after going back to the A4 render I had before.

This is my simple code setup.

import React from 'react'
import {StyleSheet, Document, Page, View, PDFViewer} from '@react-pdf/renderer'

// My simple style
const styles = StyleSheet.create({
    page : {
        flexDirection: 'row',
        backgroundColor: 'white',
    },

    section : {
        flexGrow: 2,
        padding: 10,
        margin: 10

    },
});

// Init my PDF document here
const Resume = () => {
    return (
        <Document>
            <Page size="A4" wrap = {true} style={styles.page}>
                <View style={styles.section}>
                </View>
            </Page>
        </Document>
    );
};

// Component to init the Viewer
const FinalResume = () => {
    return (
        <PDFViewer className='pdf-preview' showToolbar = {false} width = {350} height= {480}>
            <Resume />
        </PDFViewer>
    );
};

// Make the component exportable to be rendered in the Dom
export default FinalResume;

[joseDaKing]

You could try to use this library react-pdf that is used for displaying pdf files and it gives you more controll

[diegomura]

Change the Width of the PDFViewer without affecting the height and vice versa

PDFViewer has a width and height props for that purpose. You can also provide a style

I would also like to be able to remove the gray-colored background on and also set some properties of the section such as giving it rounded borders, the box-shadow also for display in the Dom but not for downloading.

Currently not possible with PDFViewer. This component just renders an iframe. PDF rendering is up to the browser, not this lib

Another major problem is that when I set the page size for example to A4, react compiles it displays fine, but when I come back I change for example to A3 I can't more after going back to the A4 render I had before.

Not sure I understood this

[UshakovDmitry]

how did you solve this problem?
I also want to get rid of the gray background

[WagdySamih]

@Abdo-El-Mobayad Were you able to find any workarounds for this?