0

Me aparece este error a cada rato, a veces no sale hasta que presiono algo en la vista y así...

Unhandled Rejection (TypeError): _nbind.externalList[num].dereference is not a function

Este es el diseño de mi PDF:

const styles = StyleSheet.create({
  page: {
    backgroundColor: '#FFFFFF',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
  headerImage: {
    width: '100%',
    height: 120
  },
  footerImage: {
    width: 300,
    height: 150,
    marginVertical: 0,
    marginHorizontal: 0
  },
  topTitle: {
    textAlign: 'center',
    fontSize: 20,
    position: 'absolute',
    top: -250
  },
  subtitle: {
    marginLeft: 50,
    marginBottom: 10,
    fontSize: 15
  },
  infoSection: {
    position: 'absolute',
    top: 250
  },
  testDetailsSection: {
    position: 'absolute',
    top: 370
  },
  section: {
    marginLeft: 70,
    flexDirection: 'row'
  },
  subfield: {
    color: 'black',
    fontSize: 15
  },
  valueField: {
    color: 'grey',
    fontSize: 15,
    marginLeft: 5
  },
  date: {
    flexDirection: 'row',
    fontSize: 10,
    position: 'absolute',
    top: 120,
    right: 400
  }
});

const PDFReport = () => (
  <Document>
    <Page size='A4' style={styles.page}>
      <View>
        <Image src={myPDFHeaderImage} style={styles.headerImage} />
      </View>

      <View>
        <Text style={styles.topTitle}>REPORTE DE PRUEBA</Text>
      </View>

      <View style={styles.infoSection}>
        <Text style={styles.subtitle}>INFORMACIÓN DEL EVALUADO</Text>
        <View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Nombre:</Text>
            <Text style={styles.valueField}>{'Mi nombre'}</Text>
          </View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Correo: </Text>
            <Text style={styles.valueField}>{'Mi email'}</Text>
          </View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Teléfono:</Text>
            <Text style={styles.valueField}>{'300000000'}</Text>
          </View>
        </View>
      </View>

      <View style={styles.testDetailsSection}>
        <Text style={styles.subtitle}>DETALLES DE LA PRUEBA</Text>
        <View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Nombre:</Text>
            <Text style={styles.valueField}>{'Nombre de la prueba'}</Text>
          </View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Evaluador:</Text>
            <Text style={styles.valueField}>{'Evaluador'}</Text>
          </View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Fecha de aplicación:</Text>
            <Text style={styles.valueField}>{new Date().toDateString()}</Text>
          </View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Estado de la prueba:</Text>
            <Text style={styles.valueField}>{'Estado'}</Text>
          </View>
          <View style={styles.section}>
            <Text style={styles.subfield}>Calificación:</Text>
            <Text style={styles.valueField}>{10}</Text>
          </View>
        </View>
      </View>

      <View
        style={{
          alignItems: 'flex-end'
        }}
      >
        <View style={styles.date}>
          <Text style={[styles.subfield, { fontSize: 10 }]}>
            Expedición del reporte:
          </Text>
          <Text style={[styles.valueField, { fontSize: 10 }]}>
            {new Date().toDateString()}
          </Text>
        </View>
        <Image src={myPDFFooterImage} style={styles.footerImage} />
      </View>
    </Page>
  </Document>
);

Así luce:
introducir la descripción de la imagen aquí

Este es mi botón de descarga:

<PDFDownloadLink document={<PDFReport />} fileName='somename.pdf'>
              {({ blob, url, loading, error }) =>
                loading ? (
                  <CircularProgress />
                ) : (
                  <IconButton aria-label='download'>
                    <GetAppIcon className={classes.icon} />
                  </IconButton>
                )
              }
            </PDFDownloadLink>

Este diseño se hizo con ReactPDF...

1 respuesta 1

0

Hay un bug al hacer re-render, encontré está solución en los issues del repositorio en Github (usar React memo):

    const DownloadReport = props => {
      const classes = myStyle();

      const PDFReport = () => (
    <Document>
      <Page size='A4' style={styles.page}>
        <View>
          <Image src={myPDFHeaderImage} style={styles.headerImage} />
        </View>

        <View>
          <Text style={styles.topTitle}>REPORTE DE PRUEBA</Text>
        </View>

        <View style={styles.infoSection}>
          <Text style={styles.subtitle}>INFORMACIÓN DEL EVALUADO</Text>
          <View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Nombre:</Text>
              <Text style={styles.valueField}>{props.name}</Text>
            </View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Correo: </Text>
              <Text style={styles.valueField}>{props.email}</Text>
            </View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Teléfono:</Text>
              <Text style={styles.valueField}>{props.phone}</Text>
            </View>
          </View>
        </View>

        <View style={styles.testDetailsSection}>
          <Text style={styles.subtitle}>DETALLES DE LA PRUEBA</Text>
          <View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Nombre:</Text>
              <Text style={styles.valueField}>{props.testName}</Text>
            </View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Evaluador:</Text>
              <Text style={styles.valueField}>{props.evaluator}</Text>
            </View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Fecha de aplicación:</Text>
              <Text style={styles.valueField}>{props.appDate}</Text>
            </View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Estado de la prueba:</Text>
              <Text style={styles.valueField}>{props.testState}</Text>
            </View>
            <View style={styles.section}>
              <Text style={styles.subfield}>Calificación:</Text>
              <Text style={styles.valueField}>{props.calification}</Text>
            </View>
          </View>
        </View>

        <View
          style={{
            alignItems: 'flex-end'
          }}
        >
          <View style={styles.date}>
            <Text style={[styles.subfield, { fontSize: 10 }]}>
              Expedición del reporte:
            </Text>
            <Text style={[styles.valueField, { fontSize: 10 }]}>
              {getCurrentFullDateWithLocale()}
            </Text>
          </View>
          <Image src={myPDFFooterImage} style={styles.footerImage} />
        </View>
      </Page>
    </Document>
  );
  return (
    <PDFDownloadLink
      document={<PDFReport />}
      fileName={`${props.name} - ${props.id}`}
    >
      {({ blob, url, loading, error }) => (
        <IconButton aria-label='download'>
          <GetAppIcon className={classes.icon} />
        </IconButton>
      )}
    </PDFDownloadLink>
  );
};

//Aquí la verdadera solució, React memo.
export default memo(DownloadReport);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.