时间戳

首页 > 解决方案 > 从 Node 传递数据到 React 构造 PDF 时使用 base64 编码

node.js - 从 Node 传递数据到 React 构造 PDF 时使用 base64 编码

问题描述

我正在将一些数据从我的 Node 后端流式传输到 React 前端，然后使用 streamaver 库获取流并将其保存为 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 的具体内容吗？

标签： node.jsreactjsbase64

解决方案

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

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

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

推荐阅读