node.js将下载的pdf文件流转换为base64字符串时出错

Question

在我的应用程序中,我从AmazonS3:

public async downloadFile(file: string): Promise<DownloadedFileType> {
    const data = await this.#s3.send(
      new GetObjectCommand({
        Bucket: process.env.AWS_BUCKET_NAME,
        Key: file,
      }),
    );

    return { stream: data.Body, name: file };
  }

private getBase64FromStream(
    stream: Readable,
    fileType: string,
  ): Promise<string> {
    return new Promise((resolve, reject) => {
      const data: Uint8Array[] = [];

      function onData(chunk: Uint8Array): void {
        data.push(chunk);
      }

      stream.on('data', onData);
      stream.once('end', () => {
        const result = Buffer.concat(data).toString('base64');
        const mimeType =
          fileType === 'pdf' ? 'application/pdf' : `image/${fileType}`;

        resolve(`data:${mimeType}; base64, ${result}`);

        stream.off('data', onData);
      });
      stream.once('error', reject);
    });
  }

export function PreviewComponent({
  src,
}: IProps): JSX.Element {
  const classes = useStyles();
  const { dispatch } = useContext(AppContext);
  const onImageClick = () => {
    dispatch(openImageModalAction(src));
  };
  const onError = (e: unknown) => {
    console.log(e);
  };

  return (
    <img
      className={classes.imageWrapper}
      src={src}
      alt="preview"
      onClick={onImageClick}
      onError={onError}
    />
  );
}

错误为React的SyntheticBaseEvent：

type: "error"
_reactName: "onError"

我不知道我做错了什么。我知道你可以把pdf文件转换成Base64。任何帮助都将不胜感激。

Answer 1

您正在使用标记来显示您的PDF，但碰巧PDF不是图像，因此img标记将不支持它。

MDN确认PDF不在img标记的支持格式列表中：

https://developer.mozilla.org/en-us/docs/web/html/element/img

请参阅react的示例：

https://stackblitz.com/edit/react-ts-pgvu9y？file=index.tsx

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
          Displaying a PDF file with React<br/>

          embed tag works<br/>
          <embed src="https://www.inkwelleditorial.com/pdfSample.pdf" width="800px" height="400px" />

          img tag does not work<br/>
          <img src="https://www.inkwelleditorial.com/pdfSample.pdf" width="800px" height="400px" />
        
      </div>
    );
  }
}