reactjs 阅读文件时PDF文件为空

4szc88ey  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(163)

我想在我的前端查看(而不是下载)保存在我的后端服务器的文件。
我的Nest应用程序(Typescript)上的控制器(“文档”):

@Get(':id')
    async seeUploadedFiled(
        @Param('id') id:number,
        @Res() res
    ) {
        res.set({"Content-Type": "arraybuffer"})
        this.service.getDocument(id).then((response) => {
            return res.sendFile(response.path, {root: '.'})
        })
    }

service.getDocument(id)返回一个对象,这里只需要路径,路径是DiskStorage保存的路径(这里:'上载/{文件名})
我的React应用程序中的提取器( typescript )

const handleVisu = (idDocument: number) => {
    client.get('/documents/' +idDocument, {headers: {"Authorization": "Bearer " + loginToken}})
    .then((response) => {
      //console.log(response.data)
      const blobFile = new Blob([response.data], {type: 'application/pdf'})
      const blobFileURL = URL.createObjectURL(blobFile)
      console.log(blobFileURL) //only for debugging

      window.open(blobFileURL)
    })
  }

它被放在一个按钮“onClick”中。client是一个axios示例。
我已经尝试了很多我在其他帖子上看到的“解决方案”,这是一个似乎起作用,但在我的应用程序上没有:

  • 我试着将responseType设置为“application/pdf”,它可以在postman上工作,但我的react应用程序上仍然有一个空白页面。
  • 我尝试将responseType设置为“blob”,并使用函数
const handleVisu = (idDocument: number) => {
    client.get('/documents/' +idDocument, {headers: {"Authorization": "Bearer " + loginToken}})
    .then((response) => {
      //console.log(response.data)
      const blobFile:Blob = response.data as Blob
      const blobFileURL = URL.createObjectURL(blobFile)
      console.log(blobFileURL) //only for debugging

      window.open(blobFileURL)
    })
  }

它返回一个类型错误,指出它无法在该类型上创建ObjectURL

  • 我也尝试过在后端流式传输文件,但在前端什么也得不到
cwtwac6a

cwtwac6a1#

好吧,显然把“内容类型”放在后端是不够的,你还需要把它放在前端:

const handleVisu = (idDocument: number) => {
    client.get('/documents/' +idDocument, {headers: {"Authorization": "Bearer " + loginToken}, responseType: "blob"})
    .then((response) => {
      const file = new Blob([response.data], {type: 'application/pdf'});
      const fileURL = URL.createObjectURL(file);

      window.open(fileURL);
    })
  }

就这样...

相关问题