Question

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

2021-11-15

2095

javascript node.js reactjs file pdf

我使用 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

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

将我们想要的 pdf 文件数据从 react 发送到后端 [json FORMAT]
在后端创建相同的 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>