Error while save file

[atifaziz2]

Hi!

I am saving pdf file to but i am getting this error
_react_pdf_renderer__WEBPACK_IMPORTED_MODULE_5___default.a.render is not a function

Expected behavior
Save pdf file to given path.

• OS: Windows
• Browser: chrome
• React-pdf version : 1.4.2

[diegomura]

I would need more information than that. A code snippet would be cool. But I would say that you are using ReactPDF.render in a web environment

[atifaziz2]

I would need more information than that. A code snippet would be cool. But I would say that you are using ReactPDF.render in a web environment

Here is the code snippet, this is just reneder function

import ReactPDF from '@react-pdf/renderer';
import ReviewDocuments from './ReviewDocuments';

render(){
const { data } = this.state;
return <ReviewDocuments data={data} />
}

ReactPDF.render(ReviewDocuments, `${__dirname}/example.pdf`);

here is the ReviewDocument code

import React from 'react';
import {
  Page,
  Text,
  View,
  Document,
  StyleSheet,
  PDFViewer,
} from '@react-pdf/renderer';
import PropTypes from 'prop-types';

// import { PDFViewer } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
  title: {
    color: '#9FA7B3',
    fontSize: 10,
    marginTop: 10,
  },
  text: {
    color: '#353A41',
    fontSize: 12,
    fontWeight: 700,
  },
  page: { width: '100%', height: '100%' },
  emphasis: { fontFamily: 'Helvetica-Bold', color: '#F22300' },
  breakable: { width: '100%', height: 400, backgroundColor: 'tomato' },
  unbreakable: { width: '100%', height: 400 },
});

const ReviewDocuments = ({ data }) => (
  <PDFViewer style={{ width: '100%', height: window.innerHeight }}>
    <Document>
      <Page size="A4" style={{ padding: 20 }}>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{ flex: 1 }}>
            <Text style={styles.title}>Company Address</Text>
            <Text style={styles.text}>
              {data.companyDetails.address.companyAddress}
              {data.companyDetails.address.city}
              {data.companyDetails.address.country}
            </Text>
            <Text style={styles.title}>RFC number</Text>
            <Text style={styles.text}>{data.companyDetails.rfcNumber}</Text>
            <Text style={styles.title}>Company details</Text>
            <Text style={styles.text}>
              {data.companyDetails.companyName}
              {data.companyDetails.phoneNumber}
              {data.companyDetails.website}
            </Text>
            <Text style={styles.title}>Company monthly earnings</Text>
            <Text style={styles.text}>
              {data.companyDetails.monthlyEarnings}
            </Text>
            <Text style={styles.title}>Documents</Text>
            <Text style={styles.text}>Company establishment documents</Text>
            <Text style={styles.text}>Articles of association</Text>
            <Text style={styles.text}>Bills</Text>
          </View>
          <View
            style={{
              flex: 1,
              alignContent: 'center',
            }}
          >
            <Text style={styles.title}>Applications full name</Text>
            <Text style={styles.text}>
              {data.user.firstName} {data.user.middleName} {data.user.lastName}{' '}
            </Text>
            <Text style={styles.title}>Curp ID</Text>
            <Text style={styles.text}>{data.user.curpId}</Text>
            <Text style={styles.title}>Date of birth</Text>
            <Text style={styles.text}>{data.user.dateOfBirth}</Text>
            <Text style={styles.title}>Mobile number</Text>
            <Text style={styles.text}>{data.user.phoneNumber}</Text>
            <Text style={styles.title}>Role in company</Text>
            <Text style={styles.text}>Software Engineer</Text>
            <Text style={styles.title}>Nationality</Text>
            <Text style={styles.text}>Maxican</Text>
            <Text style={styles.title}>Identification documents</Text>
            <Text style={styles.text}>FrontofIFE.jpg</Text>
            <Text style={styles.text}>BackofIFE.jpg</Text>
            <Text style={styles.text}>Applicationphoto.jpg</Text>
          </View>
        </View>
      </Page>
    </Document>
  </PDFViewer>
);
ReviewDocuments.propTypes = {
  data: PropTypes.object,
};

export default ReviewDocuments;

[diegomura]

ReactPDF.render is a Node only API. See how it's under Node explanation. To save a PDF document in the browser you should use PDFDownloadLink, or BlobProvider and manually download the blob file