Блог

Главная - Вопросы по программированию - @react-pdf/визуализатор отображает pdf только при первом рендеринге

@react-pdf/визуализатор отображает pdf только при первом рендеринге

#node.js #electron #react-pdf #electron-react-boilerplate

Вопрос:

В настоящее время я использую react-pdf/визуализатор и шаблон электронной реакции. Если я перезапущу свое приложение, PDF-файл будет сгенерирован и виден. Если я закрою страницу и снова открою ее, место, где находится pdf-файл, будет пустым.

введите описание изображения здесь

 const PdfOrcamentoItem = ({ item }: PropsItem) => {
  return (
    <View style={styles.section}>
      <Text>{item.Descricao}</Text>
      {item.FrontImage ? <Image src={item.FrontImage} /> : null}
    </View>
  );
};
export const OrcamentoTest = ({ items }: Props) => {
  return (
    <Document key={items.length}>
      <Page size="A4" style={styles.page}>
        {items.map((item) => (
          <PdfOrcamentoItem item={item} key={item.Ordem} />
        ))}
      </Page>
    </Document>
  );
};
//-------------------------

export function MyPdf({ items }: Props) {
  return (
    <PDFViewer width="100%" height="100%">
      <OrcamentoTest items={items} />
    </PDFViewer>
  );
}
//--------------------------

// how I call the component
<BasicModal
        title="PDF"
        onClose={() => {
          setPdfModalOpen(false);
        }}
        open={pdfModalOpen}
        fullScreen
      >
        {pdfModalOpen ? (
          <MyPdf items={itemsRef.current} />
        ) : null}
      </BasicModal>

Даже если я покажу только ссылку для загрузки файла pdf вместо того, чтобы пытаться отобразить ее, она будет работать только при первом рендеринге компонента. После этого значение instance.url становится нулевым.

 function MyPdf({ items }: Props) {
  const test = <OrcamentoTest items={items} />;
  const [instance, updateInstance] = usePDF({ document: test });

  if (instance.loading) return <div>Loading ...</div>;

  if (instance.error) return <div>Something went wrong</div>;

  return instance.url ? (
    <a href={instance.url} download="test.pdf">
      Download
    </a>
  ) : (
    <div>Something went wrong</div>
  );
}


// versions
// "react": "^17.0.1",
// "@react-pdf/renderer": "^2.0.17",

Я начинаю думать, что это может быть конфигурация веб-пакета, но на самом деле понятия не имею. Я следовал инструкциям react-pdf и не вижу, в чем может быть проблема. Если у кого-то есть какая-то идея, которая могла бы направить меня в правильном направлении, это было бы здорово. Спасибо

Ответ №1:

Я смог избежать этой проблемы, понизив свою @react-pdf/renderer версию до 2.0.16 . Это была ошибка версии.

Сообщение об ошибке на Github

Метки: