文件预览功能/文件流前端展示

珎珎啊

于 2023-03-16 11:22:26 发布

阅读量853

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_43363773/article/details/129582369

版权

文章展示了如何通过HTTP接口获取文件流，将其转换为Blob对象，从而实现图片、PDF、Word和Excel等文件的在线预览。主要涉及的技术包括HTTP的响应类型设置、Blob构造函数以及预览不同类型的文件方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件预览展示

接口请求，处理返回文件流转换为 Blob对象

  // 预览图片 或者pdf格式文件
  getViewImg(id: string) {
   
    return this.http.get(`/workflow/attachment/viewImg/${
     id}`, {
   
      observe: 'response',
      responseType: 'blob'
    });
  }
    // 预览word文件或Excel文件
  getViewFile(id: string) {
   
    return this.http.get(`/workflow/attachment/view/${
     id}`, {
   
      observe: 'response',
      responseType: 'blob'
    })
  }

预览实现ts代码

  // 附件预览
  handlePreviewClick(item: any) {
   
    if (!this.isPreviewModalVisible) {
   
      this.changeIsSpinning.

最低0.47元/天解锁文章