视图中自定义导出主数据模型数据

1.场景介绍

在低开与主数据结合使用的场景下，低开提供的导出按钮，无法导出主数据模型的数据，需要自定义导出按钮去实现。

本文讲解如何通过调用接口的方式，导出视图数据到excel。

2.效果展示

3.实现思路

1.调用主数据/api/mdm/data-ops/{dataModelCode}/export导出接口。

2.调起浏览器下载接口返回的内容。

4.操作步骤

以主数据低开开发文档中创建的人力资源构件包示例为例，参考：主数据低开开发文档 (opens new window)

4.1新增自定义按钮

打开页面中人员默认视图，视图设置-动作设置-+自定义按钮，编辑修改名称等按钮信息。

4.2代码编写

选择执行代码，填写代码逻辑，实现功能。

主数据导出接口参考主数据接口文档：主数据接口文档-导出数据 (opens new window)

//定义主数据导出接口地址
let downloadURL = "http://192.168.1.176:28090/api/mdm/data-ops/hr_personnel/export";
// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 设置文件名
let fileName = '导出人员数据.xlsx';
// 初始化POST请求
xhr.open('POST', downloadURL, true);
// 设置响应类型为blob，以便处理二进制文件
xhr.responseType = 'blob';
// 从localStorage获取Authorization令牌
let uniqueId = localStorage.getItem("uniqueId").replace(/"/g, '');
// 设置请求头
xhr.setRequestHeader('Authorization', uniqueId);
xhr.setRequestHeader('Content-Type', 'application/json');
// 请求加载完成时的处理函数
xhr.onload = function() {
    if (xhr.status === 200) {
        // 创建Blob对象，用于保存Excel文件
        let blob = new Blob([xhr.response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接并触发下载
        let objectUrl = window.URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = objectUrl;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        a.remove();
    }
};
//准备主数据导出接口所需要的请求体
const bodyData = {
    "args": [
        {
            "name": "M_DATA_STATE",
            "matchValues": [
                "0"
            ],
            "matchType": "in"
        }
    ],
    "sorts": [],
    "criteria": {
        "children": [],
        "matchType": "and"
    },
    "desensitization": true
};
//XMLHttpRequest发送POST请求
xhr.send(JSON.stringify(bodyData));

实现效果：