Apriso 通过 SheetJS 导入导出 Excel 数据

李英杰同学

发布于 2024-01-16 12:06:52

2530

发布于 2024-01-16 12:06:52

文章被收录于专栏：智能制造社区

概述

在Apriso中导入导出Excel数据通常可以通过ExcelImport/ExcelExport这两个BusinessControl来导入导出，但这两个控件只适用于服务器模式，并且需要事先在服务器上安装和注册，把旧版本Apriso中含有此控件的功能往新版本打包时往往还带来DLL版本不一致的问题。

今天介绍另外一种通过SheetJS社区版前端库的方式进行Excel数据导入导出的方法，商业用途和高阶用法请使用专业版。

配置方法（Excel导入）

▶第一步：通过官方网站下载SheetJS库

▶第二步：放到Apriso Website Portal目录下

▶第三步：新建选择Excel文件用的弹窗视图

View配置

ViewOperation配置

CSS配置

.apr-button.uploadButton {
  display: none;
}
.apr-ctfilepicker.apr-groupsolid.apr-laflex-container{
  width: 100%;
}

JavaScript配置

<script src="[Apriso]/Extensions/sheetjs/xlsx.full.min.js"></script>

Html配置

<script>
    $View.onLoaded(function () {
        //先移除View中配置按钮的原来的点击事件再重新添加点击事件，如果自行写Html按钮则直接设置点击事件即可
        $('button[value="SAVE"]').removeAttr('onclick');
        $('button[value="SAVE"]').click(function () {
            let header = ['ID', 'Name', 'Text', 'Date']; // 指定返回JSON结果的字段名，如果不指定，则认为首行是字段名
            excelImport($('.UploadFile')[0], {
                header: header,
                skipHeader: 1
            }, function (excelData) {
                $Context.outputs.ExcelData = excelData;
                $Context.outputs.Action = 'SAVE';
                $Context.submit();
            });
        });
    });
    //可考虑自行封装成通用函数
    function excelImport(uploadFile, option, callback) {
        let files = uploadFile.files;
        if (files.length == 0) return;
        let file = files[0];
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function (e) { //处理load事件。读取操作完成时触发。
            let data = e.target.result;
            let workbook = XLSX.read(data, { type: 'binary', cellDates: true }); //XLSX：/xlsx.core.min.js 通过XLSX.read(data,
            { type: type }) 方法读取excel
            let sheetNames = workbook.SheetNames; // 工作表名称集合
            let worksheet = workbook.Sheets[sheetNames[0]]; // 读取第一个sheet
            let excelData = {};
            if (option && option.header)
                excelData = XLSX.utils.sheet_to_json(worksheet, { defval: '', raw: false, dateNF: 'yyyy/m/d h:mm:ss', header: option.header });
            else
                excelData = XLSX.utils.sheet_to_json(worksheet, { defval: '', raw: false, dateNF: 'yyyy/m/d h:mm:ss' });

            if (option && option.skipHeader && parseInt(option.skipHeader) > 0 && excelData.length > 0)
                excelData.splice(0,
                    parseInt(option.skipHeader));

            e.target.value = null; //读取后清空
            callback(excelData);
        };
    }
</script>

运行效果

<服务器模式>

<客户端模式>

读取至服务器后的结果

配置方法（Excel导出）

▶第一、二步同Excel导入，此处省略。

▶第三步：新建选择Excel文件用的弹窗视图

View配置

ViewOperation配置

JavaScript配置

<script src="[AprisoScripts]/Extensions/xlsx/dist/xlsx.full.min.js"></script>

Html配置

$View.onLoaded(function () {
        let fileName = $Context.inputs.FileName;
        let excelHeader = [$Context.inputs.ExcelHeader];
        let excelData = $Context.inputs.ExcelData;
        let columnWidth = [];
        $($Context.inputs.ColumnWidth).each((i, width) => {
            columnWidth.push({ wch: width });
        });

        /* generate worksheet and workbook */
        const worksheet = XLSX.utils.json_to_sheet(excelData);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Data");

        /* fix headers */
        XLSX.utils.sheet_add_aoa(worksheet, excelHeader, { origin: "A1" });

        /* calculate column width */
        worksheet["!cols"] = columnWidth;

        /* create an XLSX file and try to save to local system */
        XLSX.writeFile(workbook, fileName, { compression: true });

        $Context.outputs.Action = 'CLOSE_POPUP';
        $Context.submit();
    });