将数据从 Node 传递到 React 以构建 PDF 时使用 base64 编码

Question

我正在将一些数据从我的 Node 后端流式传输到 React 前端，然后使用 streamsaver 库获取流并将其保存为 PDF。我在流程结束时下载了正确数量的文档。但是，页面是空白的，表明数据未正确编码。所以我正在尝试使用base64编码。

我的后端代码如下所示：

  async getNotesPDFStream(args, session, ctx) {
    try {
      const data = await this.getDataToStream(args, session, ctx);
      fs.writeFileSync("./test.pdf", data); // This test works on the backend - creates a PDF
      const encodedData = btoa(data); // encoding as a base64 string
      const readable = new Readable();
      readable.push(encodedData);
      readable.push(null);
      readable.pipe(ctx.stream);
      return Response.Success("PDF now streaming!");
    } catch (err) {
      console.log("Error 167: ", err);
      return Response.Error("Error retrieving progress notes PDF.", err);
    }
  }

在 React 前端我这样做：

  let buffer = '';
   dataStream.on('data', (data) => {
     buffer += data;
  });

  dataStream.on('end', () => {
    console.log('STREAM FINISHED');
    const fileStream = streamSaver.createWriteStream('notes.pdf');

    const decodedData = atob(buffer); // Decode the final buffer
    console.log('decodedData: ', decodedData);

    const pdfBlob = new Blob([decodedData], { type: 'application/pdf' });
    const readableStream = pdfBlob.stream();

    if (window.WritableStream && readableStream.pipeTo) {
      return readableStream
        .pipeTo(fileStream)
        .then(() => console.log('Done writing'));
    }
    // Write (pipe) manually
    const writer = fileStream.getWriter();
    const reader = readableStream.getReader();
    const pump = () =>
      reader
        .read()
        .then(res =>
          res.done ? writer.close() : writer.write(res.value).then(pump)
        );
    pump();

尝试此操作后，我下载了正确数量的 PDF 文档页数，但页面仍然是空白的。我在这里错过了什么？我怎样才能确保编码正确？

顺便说一下，我尝试使用一些基本的 html 并以相同的方式传递它，使用相同的编码方法，它正确地重建了 html。关于构建 PDF 有什么特别需要注意的吗？

Answer 1

最后我意识到我把它变得比必要的更复杂了。使用 writer.write() 功能，我能够想出这个简洁的工作解决方案：

  dataStream.on('data', (data) => {
    writer.write(data) // should be a Uint8Array
  })

  dataStream.on('end', () => {
    console.log('STREAM FINISHED');
    writer.close();
  });

将数据从 Node 传递到 React 以构建 PDF 时使用 base64 编码

Using base64 Encoding When Passing Data from Node to React to Construct PDF

base64

node.js

reactjs