跳到主要内容

匿名提交时支持 EXCEL 导入子表单

1. 案例背景

在分享给外部客户填写表单时,往往会遇到子表单需要支持导入 Excel 的情况。但目前因为案例原因,无法支持子表单直接导入文件。

2. 操作步骤

2.1 表单设计

文件上传限制:只能上传一个文件,类型只支持 Excel

2.2 EXCEL 模板制定

注意:此文档案例只支持单一行表头且不支持合并列。模板的表头字段要至少覆盖子表单必填字段

2.2 引入 js-excel 及相关代码配置

2.2.1 引入 js-excel 包

const src = "https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js";
const script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = src;
document.body.appendChild(script);

2.2.2 读取上传文件内容

// 从上传的文件中解析EXCEL内容并回调处理函数
// 这里增加一个this的参数传递,用于对页面元素进行定位修改
function readWorkbookFromRemoteFile(_this,url, callback) {
let xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
if (xhr.status == 200) {
let data = new Uint8Array(xhr.response)
let workbook = XLSX.read(data, { type: 'array' });
if (callback) callback(workbook, _this);
}
};
xhr.send();
}

2.2.3 填充到子表单

//填写导入到子表单处理
function excelImportToTable(workbook,_this)
{
let sheetNames = workbook.SheetNames; // 工作表名称集合
let worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
let tableJson = XLSX.utils.sheet_to_json(worksheet);
let tableValue = [];
// 循环读取Json对表单数据进行赋值
tableJson.forEach(function (item, $index, arr) {
let tmpValue = {
// 时间 -如果有时间字段,要这样处理一下,因为EXCEL上传来都是4986这种数字
dateField_l1vygf2d: new Date((item.时间 - 1) * 24 * 3600000 + 1),
// 发货仓
子表单的字段: item.EXCE表头上的字段,
//其它字段写到这里
}
tableValue.push(tmpValue);
})
// 写入子表单
const acitivityTable = _this.$("子表单的唯一ID");
async function setTableValue() {
const symbol = await acitivityTable.setValue(tableValue);
}
setTableValue().then(function (result) {
_this.utils.dialog({
type: 'info',
title: '数据导入完成',
content: "请仔细复核后提交!",
messageProps: {
type: 'notice',
}
})
});
}

2.2.4 对上传组件的上传成功事件进行设置

export function onExclUploadSuccess(file, value) {
console.log('onSuccess', file, value);
const uploadFileUrl=value[0].downloadURL
const fileContent = readWorkbookFromRemoteFile(this,uploadFileUrl, excelImportToTable)
}

3. 效果展示

4. 在线试玩

https://www.aliwork.com/bench/coe?tplUuid=TPL_W3JB1K2U64H83ARH2BQS

--------------------获取宜搭最新信息,欢迎关注我们--------------------

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4