Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/42.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 从节点传递数据以响应构造PDF时使用base64编码_Node.js_Reactjs_Base64 - Fatal编程技术网

Node.js 从节点传递数据以响应构造PDF时使用base64编码

Node.js 从节点传递数据以响应构造PDF时使用base64编码,node.js,reactjs,base64,Node.js,Reactjs,Base64,我正在将一些数据从节点后端流式传输到React前端,然后使用streamsaver库获取流并将其保存为PDF。在这个过程结束时,我下载了正确数量的文档。但是,页面是空白的,这表明数据没有正确编码。所以我尝试使用base64编码 我的后端代码如下所示: async getNotesPDFStream(args, session, ctx) { try { const data = await this.getDataToStream(args, session, ctx);

我正在将一些数据从节点后端流式传输到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文档的构建有什么特别需要注意的吗?

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

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

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