将react-pdf渲染文件保存到state以将其发送到服务器？

Question

我使用react-pdf库，我设法在本地保存文件，但现在我还需要将其保存在服务器上，因为我需要对某个用户生成的所有文件进行历史显示。

                                    document={
                                        <DailyAssetPDF
                                            information={{ title, subtitle, locationName, today, selectedAssetName }}
                                            tableData={tableData}
                                            image1={{
                                                chart1, chart2, chart4 // donut chart
                                            }}
                                            image2={
                                                this.chartRef3.current.chartInstance.toBase64Image() || // chart bar
                                                ""
                                            }
                                            LN={LN}
                                            language={language}
                                        />
                                    }
                                    fileName={`${title}.pdf`}
                                >
                                    {({ loading }) =>
                                        loading ? (
                                            LN[language].loadingDocument
                                        ) : (
                                            <Button>{LN[language].report_export_btn}</Button>
                                        )
                                    }
                                </PDFDownloadLink> ```

Answer 1

对我来说最好的解决方案是：

1. 将 pdf 文件中我们想要的数据从 React 发送到后端 [json 格式]

2. 在后端创建相同的pdf并将其保存在那里[使用multer ..]或在DB上

欲了解更多灵感，请访问：https://github.com/exportsdk/sample-react-pdf-api

Answer 2

这对我有用：

const createCotizacion = async () => {
  setLoadingButton(true);

  //blob to file .pdf
  const url = URL.createObjectURL(pdfBlob);
  const pdfFile = new File([pdfBlob], "documento.pdf", {
    type: "application/pdf",
  });

  //send pdf to backend

}

<BlobProvider
  document={
    <CotizacionPDF
      storeLogged={storeLogged}
      diasValidacion={diasValidacion}
      observacion={observacion}
      contadorCotizaciones={contadorCotizacionesA}
      userLogged={userLogged}
    />
  }
>
  {({ blob, url, loading, error }) => {
    // Do whatever you need with blob here
    setPdfBlob(blob);
  }}
</BlobProvider>