js后端返回二进制流，转文件预览查看。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第1天，点击查看活动详情

大家好我是郑大大，一条想翻身的咸鱼。第一次写文章想记录下工作中遇到过的问题;有不足的地方还请大佬们多多指教。

工作上因为业务需求，后端需要返回文件流前端再次做处理。下载查看。 废话不多说上图， 后端返回的二进制包含了文件格式和二进制流。 responseType，responseType 它表示服务器响应的数据类型，由于后台返回来的是二进制数据，所以我们要把它设为 arraybuffer（如果后端传递过来约定的是blob，那么responseType应该设置成这个responseType: 'blob'）

       {
        url: www.baidu.com,
        data:{
            Id:xxx,
            key:xxx,
	},
	responseType: 'arraybuffer', //blob
	method: 'GET',
        }

然后处理返回来的二进制流 主要用到 WebAPI：Blob 在js中，Blob通常表示二进制数据，更多api请移步Blob官网

function(res) {
	if (!res.iserror) {
var blob = new Blob([res],{type:"png"}); // res 二进制流，type：文件类型
var objectUrl = URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display:none');
a.setAttribute('href', objectUrl);
var filename="xxx.png";		//文件文件类型对应type的文件类型
a.setAttribute('download', filename);
a.click();
URL.revokeObjectURL(objectUrl); 
   }
        }

web端到这一步就一个下载然后预览文件信息了。如果下载下来的格式和方法都没错，可以看看请求responseType类型，有没有和后端约定。我多次尝试就是因为这个问题导致花的时间过长，后端写好接口家里有事情请假回去。小伙伴们细心一点哦。

移动端 uniapp提供的api： uni.downloadFile ：注意：h5不支持此方法。

uni.downloadFile({
  url: 'https://example.com/somefile.pdf',
  success: function (res) {
    var filePath = res.tempFilePath; 
    uni.openDocument({
      filePath: filePath,  //文件路径
      showMenu: true,  //文件类型定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx，支付宝小程序仅支持pdf
      success: function (res) {
        console.log('打开文档成功');
      }
    });
  }
});

微信小程序：微信官方提供了相关的API 来预览常见文件，目前支持如下格式的文件 总结一下就是先用 wx.downloadFile下载文件然后使用wx.openDocument来打开文件。

wx.downloadFile({
  // 示例 url，并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

最后第一次写文章，不好的地方请多多指教。

致曾经的自己--其实我没有拖延症，快递一拿到我就会拆，闹钟一响我就会按，零食一开我就会吃，你一出现我就会笑。