文档流数据解析

什么是文档流

        像下面这种格式的数据就是后端返回的文档流，就是文档传递的一个格式，前端需要做的就是把他解析成一个地址，然后访问这个地址就能访问这个文档了。

案例：

        大白话来说，场景就是后端要求传过去一个图片base64格式，然后返回给前端一个文档。所以我们要做的就是掉接口传一个base64str，拿到后端返回的文档流并展示出来。

（我的场景：我签名拿到签名的图片，将他传给后端，后端将签名放在PDF上面，然后将这个PDF返给我）

1、请求参数：图片的base64格式，如图所示

直接传递这个参数会报错

必须转化为formdata对象格式.，并设置相应的请求头（不固定）。具体看代码部分

let formdata = new FormData();
formdata.append('base64Str', data);

2、响应参数：后端返回pdf文档流

1、定义响应数据类型responseText：‘blob’，

2、创建new Blob（[res], {type：‘此处定义类型’}）

3、通过window.URL | window.webkitURL 获取当前的地址

4、创建URL.createObjectURL(blob)创建链接，通过这个链接便能拿到文档了

拿到的res（创建new Blob之前的格式）

 最终的链接（从blob开始，不是从http开始）

 

代码实现

1、封装api

export function post(data: any): Promise<any> {
  // 上传文件的文件流是无法被序列化并传递的，所以需要使用formdata对象
  let formdata = new FormData();
  formdata.append('base64Str', data);
  return new Promise((resolve, reject) => {
    service({
      baseURL: '/demo/pdf/merge',
      method: 'post',
      data: formdata,
      // 定义请求头
      headers: {
        'Content-Type': 'mutipart/form-data',
        'mime-type': 'octet-stream',
      },
      // 响应数据的类型
      responseType: 'blob',
    }).then((res: any) => {
      // 此处的res就是data数据，因为在拦截器里面我已经解构过了
      const blob = new Blob([res], { type: 'application/pdf;charset=utf8' });
      const URL = window.URL || window.webkitURL;
      const href = URL.createObjectURL(blob);
      resolve(href);
    }).catch((err: any) => {
      reject(err);
    });
  });
}

2、调取接口拿到访问href即可

具体根据情况使用。

post('xxx').then(res => {
    window.open(res)
})