uni-app 微信小程序 查看 base64 文件流格式的 pdf

环境:

uni-app 微信小程序

需求描述:

前端请求后端接口,后端返回 base64 格式的 pdf 文件流,前端获取数据打开查看 pdf

代码实现:

1.添加接口响应头配置

responseType: 'arraybuffer' 

2.使用微信文件管理系统将 后端接口返回的 base64 格式文件流写入手机,然后打开预览

// 调用获取 pdf 文件流接口
await getReportDoc({ ...params }).then((data) => {
  const fs = uni.getFileSystemManager()
  const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '.pdf'   // wx.env.USER_DATA_PATH 为微信提供的保存文件路径
  fs.writeFile({
    filePath,
    data: wx.base64ToArrayBuffer(data.data.replace(/[\r\n]/g, '')),  // 将 base64 转为 arrayuffer
    success (res) {
      uni.openDocument({
        showMenu: true,
        fileType: 'pdf',
        filePath,
        success: function (res) {
          console.log('打开文档成功')
        }
      })
    },
    fail (err) {
      console.log('错误', err)
    }
  })
})

这里说一下,小程序不支持 Blob,所以响应类型 responseType 不能设置为 Blob,我查了很多,亲测以上代码有效。如有其他方式,欢迎补充

猜你喜欢

转载自blog.csdn.net/xiamoziqian/article/details/129065480
今日推荐