js对后台数据库中blob类型的数据，进行二进制解码并解决中文乱码

后端
后端是在使用activiti7时，一个查询了部署了的流程图，对应的一个存在数据库中，数据类型为blob类型的值的这么一个接口

 /**
     * 根据流程定义id查看流程图(xml或者图片)
     **/
    @GetMapping(value = "/selectPicture")
    public AjaxResult getFlowChart(String processDefinitionId) {
        String  resType="xml";
        HttpHeaders headers = new HttpHeaders();
        if ("xml".equals(resType)) {
            //xml格式
            headers.setContentType(MediaType.APPLICATION_XML);
        } else {
            //image 图片格式
            headers.setContentType(MediaType.IMAGE_PNG);
        }
        //获取流程定义信息
        ProcessDefinition processDefinition = repositoryService
                .createProcessDefinitionQuery()
                .processDefinitionId(processDefinitionId)
                .singleResult();
        String resourceName = "";
        if ("image".equals(resType)) {
            resourceName = processDefinition.getDiagramResourceName();
        } else if ("xml".equals(resType)) {
            resourceName = processDefinition.getResourceName();
        }
        InputStream resourceAsStream = repositoryService
                .getResourceAsStream(processDefinition.getDeploymentId(), resourceName);
        return  AjaxResult.success("成功",IoUtil.readBytes(resourceAsStream));
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

前端
如果你想解析后台传来的 Blob 并得到其中的字符串，并且其中的中文不能乱码，你可以使用以下步骤：
1.使用 atob() 函数将 Blob 转换为 base64 字符串。

2.使用 iconv 库将 base64 字符串转换为 UTF-8 字符串。

npm install iconv-lite --save
1

    selectPicture(data) {
      let _this=this;
      selectPicture(data.id).then(res => {
        if (res.code == 200) {
 
          const decodedData = atob(res.data);
          const da=iconv.decode(decodedData,'UTF-8')
          _this.$router.push({
            name: `selectprocces`,
            params: {
             da: da
            }
          })
        }
      })

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17