diff --git a/src/assets/images/qrExample.png b/src/assets/images/qrExample.png new file mode 100644 index 0000000..e645f44 --- /dev/null +++ b/src/assets/images/qrExample.png Binary files differ diff --git a/src/assets/images/qrExample.png b/src/assets/images/qrExample.png new file mode 100644 index 0000000..e645f44 --- /dev/null +++ b/src/assets/images/qrExample.png Binary files differ diff --git a/src/views/business/lab/excelEdit/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts deleted file mode 100644 index f46c07f..0000000 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ /dev/null @@ -1,51 +0,0 @@ -import GC from '@grapecity-software/spread-sheets' -import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} - -/** - * 处理表单数据字段的对应 - * @param type 模板类型 - * @param data 要处理的数据 - */ -const solveFormData = (type: string, data: any) => { - let result: any - switch (type) { - case '校准证书': - result = { - ...data, - certificateNo: data.certificateReportCode, // 证书编号 - yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 - monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 - dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 - yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 - monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 - dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 - } - break - default: - break - } - - return result -} - -/** - * 表单绑定 - * @param spread - * @param data - */ -export default function bindForm(spread: any, data: any, type = '校准证书') { - // 处理数据 - const solvedData = solveFormData(type, data) - // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { - // 单元格绑定数据源 - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 - // 填入数据 - sheet.setDataSource(source) - } -} diff --git a/src/assets/images/qrExample.png b/src/assets/images/qrExample.png new file mode 100644 index 0000000..e645f44 --- /dev/null +++ b/src/assets/images/qrExample.png Binary files differ diff --git a/src/views/business/lab/excelEdit/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts deleted file mode 100644 index f46c07f..0000000 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ /dev/null @@ -1,51 +0,0 @@ -import GC from '@grapecity-software/spread-sheets' -import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} - -/** - * 处理表单数据字段的对应 - * @param type 模板类型 - * @param data 要处理的数据 - */ -const solveFormData = (type: string, data: any) => { - let result: any - switch (type) { - case '校准证书': - result = { - ...data, - certificateNo: data.certificateReportCode, // 证书编号 - yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 - monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 - dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 - yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 - monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 - dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 - } - break - default: - break - } - - return result -} - -/** - * 表单绑定 - * @param spread - * @param data - */ -export default function bindForm(spread: any, data: any, type = '校准证书') { - // 处理数据 - const solvedData = solveFormData(type, data) - // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { - // 单元格绑定数据源 - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 - // 填入数据 - sheet.setDataSource(source) - } -} diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index 3ea13b2..bb359d4 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -20,12 +20,13 @@ // 注意:spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序 import '@grapecity-software/spread-sheets-designer-resources-cn' import '@grapecity-software/spread-sheets-designer' +import qrImg from '../../../../assets/images/qrExample.png' +import { exportFile, importFile } from './methods/file' +import bindForm from './methods/bind/bindForm' +import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' import { importSjsFile } from './index' -import { importFile, exportFile } from './methods/file' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -import bindForm from './bindForm' -// const config = GC.Spread.Sheets.Designer.DefaultConfig let designer: any = null let spread: any = null let sheet: any = null @@ -33,37 +34,20 @@ // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 async function initComplete() { - // const res = await fetch('http://111.198.10.15:21408/test/压力表-新_1741080567308.xlsx') - // const file = await res.blob() - // spread.import( - // file, - // () => { - // console.log('spread:导入文件成功') - // }, - // (e) => { - // console.log('spread:上传文件发生错误', e) - // }, - // { - // fileType: GC.Spread.Sheets.FileType.excel, - // }, - // ) - // importSjsFile(spread, new File(a)) - - // handleBindForm() emits('initComplete', spread) - // const res = await fetch('http://111.198.10.15:21408/test/校准证书_1742974211244.sjs') - // const file = await res.blob() - // importSjsFile(spread, file).then(() => { - // handleBindForm() - // }) } // -----------------------------------导入导出------------------------------------------------- // 执行导入文件 const handleImportFile = (file: any, data: any) => { + // 导入完成 importFile(spread, file).then(() => { - // handleBindForm(data) + // 绑定数据 bindForm(spread, data) + + // getSpanInfo(sheet, 52, 20) + // bindPicture(sheet, ) + handleBindPicture() }) } // 执行导出文件 @@ -72,6 +56,31 @@ console.log('获取到文件', blob) } +// -----------------------------------图片------------------------------------------------------- +function handleBindPicture() { + const sheet = spread.getSheetFromName('证书首页') // 获取证书首页sheet页 + // 二维码章 + bindPicture( + sheet, + 'qr', + qrImg, + 150, + 150, + 51, + 19, + ) + // 校准专用章 + bindPicture( + sheet, + 'singer', + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, + 120, + 36, + 13, + ) +} + // -----------------------------------数据绑定------------------------------------------------- // 表格绑定 function handleBindTable() { @@ -115,8 +124,8 @@ dialogVisible.value = true nextTick(() => { designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) - spread = designer.getWorkbook() - sheet = spread.getActiveSheet() + spread = designer.getWorkbook() // 创建工作簿实例 + sheet = spread.getActiveSheet() // 获取当前活动工作表 initComplete() }) } diff --git a/src/assets/images/qrExample.png b/src/assets/images/qrExample.png new file mode 100644 index 0000000..e645f44 --- /dev/null +++ b/src/assets/images/qrExample.png Binary files differ diff --git a/src/views/business/lab/excelEdit/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts deleted file mode 100644 index f46c07f..0000000 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ /dev/null @@ -1,51 +0,0 @@ -import GC from '@grapecity-software/spread-sheets' -import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} - -/** - * 处理表单数据字段的对应 - * @param type 模板类型 - * @param data 要处理的数据 - */ -const solveFormData = (type: string, data: any) => { - let result: any - switch (type) { - case '校准证书': - result = { - ...data, - certificateNo: data.certificateReportCode, // 证书编号 - yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 - monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 - dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 - yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 - monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 - dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 - } - break - default: - break - } - - return result -} - -/** - * 表单绑定 - * @param spread - * @param data - */ -export default function bindForm(spread: any, data: any, type = '校准证书') { - // 处理数据 - const solvedData = solveFormData(type, data) - // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { - // 单元格绑定数据源 - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 - // 填入数据 - sheet.setDataSource(source) - } -} diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index 3ea13b2..bb359d4 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -20,12 +20,13 @@ // 注意:spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序 import '@grapecity-software/spread-sheets-designer-resources-cn' import '@grapecity-software/spread-sheets-designer' +import qrImg from '../../../../assets/images/qrExample.png' +import { exportFile, importFile } from './methods/file' +import bindForm from './methods/bind/bindForm' +import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' import { importSjsFile } from './index' -import { importFile, exportFile } from './methods/file' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -import bindForm from './bindForm' -// const config = GC.Spread.Sheets.Designer.DefaultConfig let designer: any = null let spread: any = null let sheet: any = null @@ -33,37 +34,20 @@ // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 async function initComplete() { - // const res = await fetch('http://111.198.10.15:21408/test/压力表-新_1741080567308.xlsx') - // const file = await res.blob() - // spread.import( - // file, - // () => { - // console.log('spread:导入文件成功') - // }, - // (e) => { - // console.log('spread:上传文件发生错误', e) - // }, - // { - // fileType: GC.Spread.Sheets.FileType.excel, - // }, - // ) - // importSjsFile(spread, new File(a)) - - // handleBindForm() emits('initComplete', spread) - // const res = await fetch('http://111.198.10.15:21408/test/校准证书_1742974211244.sjs') - // const file = await res.blob() - // importSjsFile(spread, file).then(() => { - // handleBindForm() - // }) } // -----------------------------------导入导出------------------------------------------------- // 执行导入文件 const handleImportFile = (file: any, data: any) => { + // 导入完成 importFile(spread, file).then(() => { - // handleBindForm(data) + // 绑定数据 bindForm(spread, data) + + // getSpanInfo(sheet, 52, 20) + // bindPicture(sheet, ) + handleBindPicture() }) } // 执行导出文件 @@ -72,6 +56,31 @@ console.log('获取到文件', blob) } +// -----------------------------------图片------------------------------------------------------- +function handleBindPicture() { + const sheet = spread.getSheetFromName('证书首页') // 获取证书首页sheet页 + // 二维码章 + bindPicture( + sheet, + 'qr', + qrImg, + 150, + 150, + 51, + 19, + ) + // 校准专用章 + bindPicture( + sheet, + 'singer', + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, + 120, + 36, + 13, + ) +} + // -----------------------------------数据绑定------------------------------------------------- // 表格绑定 function handleBindTable() { @@ -115,8 +124,8 @@ dialogVisible.value = true nextTick(() => { designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) - spread = designer.getWorkbook() - sheet = spread.getActiveSheet() + spread = designer.getWorkbook() // 创建工作簿实例 + sheet = spread.getActiveSheet() // 获取当前活动工作表 initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts new file mode 100644 index 0000000..a17dcd4 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -0,0 +1,54 @@ +import GC from '@grapecity-software/spread-sheets' +import dayjs from 'dayjs' +const certTypeMap: { [key: string]: string } = { + 1: '校准证书' +} + +/** + * 处理表单数据字段的对应 + * @param type 模板类型 + * @param data 要处理的数据 + */ +const solveFormData = (type: string, data: any) => { + let result: any + switch (type) { + case '校准证书': + result = { + ...data, + certificateNo: data.certificateReportCode, // 证书编号 + yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 + monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 + dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 + yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 + monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 + dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 + dttTest: { + propA: '我是测试字段' + } + } + break + default: + break + } + + return result +} + +/** + * 表单绑定 + * @param spread + * @param data + */ +export default function bindForm(spread: any, data: any, type = '校准证书') { + // 处理数据 + const solvedData = solveFormData(type, data) + // 获取sheet页数量 + const seetCount = spread.getSheetCount() + for (let i = 0; i < seetCount; i++) { + // 单元格绑定数据源 + const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) + const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 填入数据 + sheet.setDataSource(source) + } +} diff --git a/src/assets/images/qrExample.png b/src/assets/images/qrExample.png new file mode 100644 index 0000000..e645f44 --- /dev/null +++ b/src/assets/images/qrExample.png Binary files differ diff --git a/src/views/business/lab/excelEdit/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts deleted file mode 100644 index f46c07f..0000000 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ /dev/null @@ -1,51 +0,0 @@ -import GC from '@grapecity-software/spread-sheets' -import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} - -/** - * 处理表单数据字段的对应 - * @param type 模板类型 - * @param data 要处理的数据 - */ -const solveFormData = (type: string, data: any) => { - let result: any - switch (type) { - case '校准证书': - result = { - ...data, - certificateNo: data.certificateReportCode, // 证书编号 - yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 - monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 - dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 - yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 - monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 - dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 - } - break - default: - break - } - - return result -} - -/** - * 表单绑定 - * @param spread - * @param data - */ -export default function bindForm(spread: any, data: any, type = '校准证书') { - // 处理数据 - const solvedData = solveFormData(type, data) - // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { - // 单元格绑定数据源 - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 - // 填入数据 - sheet.setDataSource(source) - } -} diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index 3ea13b2..bb359d4 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -20,12 +20,13 @@ // 注意:spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序 import '@grapecity-software/spread-sheets-designer-resources-cn' import '@grapecity-software/spread-sheets-designer' +import qrImg from '../../../../assets/images/qrExample.png' +import { exportFile, importFile } from './methods/file' +import bindForm from './methods/bind/bindForm' +import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' import { importSjsFile } from './index' -import { importFile, exportFile } from './methods/file' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -import bindForm from './bindForm' -// const config = GC.Spread.Sheets.Designer.DefaultConfig let designer: any = null let spread: any = null let sheet: any = null @@ -33,37 +34,20 @@ // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 async function initComplete() { - // const res = await fetch('http://111.198.10.15:21408/test/压力表-新_1741080567308.xlsx') - // const file = await res.blob() - // spread.import( - // file, - // () => { - // console.log('spread:导入文件成功') - // }, - // (e) => { - // console.log('spread:上传文件发生错误', e) - // }, - // { - // fileType: GC.Spread.Sheets.FileType.excel, - // }, - // ) - // importSjsFile(spread, new File(a)) - - // handleBindForm() emits('initComplete', spread) - // const res = await fetch('http://111.198.10.15:21408/test/校准证书_1742974211244.sjs') - // const file = await res.blob() - // importSjsFile(spread, file).then(() => { - // handleBindForm() - // }) } // -----------------------------------导入导出------------------------------------------------- // 执行导入文件 const handleImportFile = (file: any, data: any) => { + // 导入完成 importFile(spread, file).then(() => { - // handleBindForm(data) + // 绑定数据 bindForm(spread, data) + + // getSpanInfo(sheet, 52, 20) + // bindPicture(sheet, ) + handleBindPicture() }) } // 执行导出文件 @@ -72,6 +56,31 @@ console.log('获取到文件', blob) } +// -----------------------------------图片------------------------------------------------------- +function handleBindPicture() { + const sheet = spread.getSheetFromName('证书首页') // 获取证书首页sheet页 + // 二维码章 + bindPicture( + sheet, + 'qr', + qrImg, + 150, + 150, + 51, + 19, + ) + // 校准专用章 + bindPicture( + sheet, + 'singer', + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, + 120, + 36, + 13, + ) +} + // -----------------------------------数据绑定------------------------------------------------- // 表格绑定 function handleBindTable() { @@ -115,8 +124,8 @@ dialogVisible.value = true nextTick(() => { designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) - spread = designer.getWorkbook() - sheet = spread.getActiveSheet() + spread = designer.getWorkbook() // 创建工作簿实例 + sheet = spread.getActiveSheet() // 获取当前活动工作表 initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts new file mode 100644 index 0000000..a17dcd4 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -0,0 +1,54 @@ +import GC from '@grapecity-software/spread-sheets' +import dayjs from 'dayjs' +const certTypeMap: { [key: string]: string } = { + 1: '校准证书' +} + +/** + * 处理表单数据字段的对应 + * @param type 模板类型 + * @param data 要处理的数据 + */ +const solveFormData = (type: string, data: any) => { + let result: any + switch (type) { + case '校准证书': + result = { + ...data, + certificateNo: data.certificateReportCode, // 证书编号 + yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 + monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 + dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 + yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 + monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 + dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 + dttTest: { + propA: '我是测试字段' + } + } + break + default: + break + } + + return result +} + +/** + * 表单绑定 + * @param spread + * @param data + */ +export default function bindForm(spread: any, data: any, type = '校准证书') { + // 处理数据 + const solvedData = solveFormData(type, data) + // 获取sheet页数量 + const seetCount = spread.getSheetCount() + for (let i = 0; i < seetCount; i++) { + // 单元格绑定数据源 + const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) + const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 填入数据 + sheet.setDataSource(source) + } +} diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts new file mode 100644 index 0000000..2642f36 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts @@ -0,0 +1,29 @@ +/** + * 绑定图片 + */ +import GC from '@grapecity-software/spread-sheets' + +/** + * 图片绑定 + * @param spread + * @param data + */ +export function bindPicture( + sheet: any, + name: string, // 为添加的图片指定一个唯一的名称。这个名称可用于后续对该图片进行引用、操作或管理。 + url: string, // 图片的来源地址,可以是本地文件路径(在支持的环境下),也可以是网络图片的 URL + width: number, // 图片的宽度,单位为像素。可以根据需要调整图片的显示宽度。 + height: number, // 图片的高度,单位为像素。可以根据需要调整图片的显示高度。 + startRow: number, // 设置图片在工作表中起始行的索引。索引从 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + startColumn: number, // 设置图片在工作表中起始列的索引 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + startRowOffset = 0, // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + startColumnOffset = 0, // 设置图片相对于起始列的水平偏移量 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + left = 0, // 图片在工作表中的左偏移量,即图片左上角相对于工作表左上角的水平距离,单位通常为像素 + top = 0, // 图片在工作表中的上偏移量,即图片左上角相对于工作表左上角的垂直距离,单位通常为像素。 +) { + const picture = sheet.pictures.add(name, url, left, top, width, height) + picture.startRow(startRow) + picture.startColumn(startColumn) // 设置图片在工作表中起始列的索引 + picture.startRowOffset(startRowOffset) // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 10,表示图片会相对于起始行向下偏移 10 像素。 + picture.startColumnOffset(startColumnOffset) // 设置图片相对于起始列的水平偏移量 +} diff --git a/src/assets/images/qrExample.png b/src/assets/images/qrExample.png new file mode 100644 index 0000000..e645f44 --- /dev/null +++ b/src/assets/images/qrExample.png Binary files differ diff --git a/src/views/business/lab/excelEdit/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts deleted file mode 100644 index f46c07f..0000000 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ /dev/null @@ -1,51 +0,0 @@ -import GC from '@grapecity-software/spread-sheets' -import dayjs from 'dayjs' -const certTypeMap: { [key: string]: string } = { - 1: '校准证书' -} - -/** - * 处理表单数据字段的对应 - * @param type 模板类型 - * @param data 要处理的数据 - */ -const solveFormData = (type: string, data: any) => { - let result: any - switch (type) { - case '校准证书': - result = { - ...data, - certificateNo: data.certificateReportCode, // 证书编号 - yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 - monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 - dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 - yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 - monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 - dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 - } - break - default: - break - } - - return result -} - -/** - * 表单绑定 - * @param spread - * @param data - */ -export default function bindForm(spread: any, data: any, type = '校准证书') { - // 处理数据 - const solvedData = solveFormData(type, data) - // 获取sheet页数量 - const seetCount = spread.getSheetCount() - for (let i = 0; i < seetCount; i++) { - // 单元格绑定数据源 - const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) - const sheet = spread.getSheet(i) // 获取第几个sheet页 - // 填入数据 - sheet.setDataSource(source) - } -} diff --git a/src/views/business/lab/excelEdit/excelEditDialog.vue b/src/views/business/lab/excelEdit/excelEditDialog.vue index 3ea13b2..bb359d4 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -20,12 +20,13 @@ // 注意:spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序 import '@grapecity-software/spread-sheets-designer-resources-cn' import '@grapecity-software/spread-sheets-designer' +import qrImg from '../../../../assets/images/qrExample.png' +import { exportFile, importFile } from './methods/file' +import bindForm from './methods/bind/bindForm' +import { bindPicture, getSpanInfo } from './methods/bind/bindPicture' import { importSjsFile } from './index' -import { importFile, exportFile } from './methods/file' const emits = defineEmits(['initComplete']) GC.Spread.Common.CultureManager.culture('zh-cn') -import bindForm from './bindForm' -// const config = GC.Spread.Sheets.Designer.DefaultConfig let designer: any = null let spread: any = null let sheet: any = null @@ -33,37 +34,20 @@ // ----------------------------------------初始化相关----------------------------------------------- // designer初始化完成 async function initComplete() { - // const res = await fetch('http://111.198.10.15:21408/test/压力表-新_1741080567308.xlsx') - // const file = await res.blob() - // spread.import( - // file, - // () => { - // console.log('spread:导入文件成功') - // }, - // (e) => { - // console.log('spread:上传文件发生错误', e) - // }, - // { - // fileType: GC.Spread.Sheets.FileType.excel, - // }, - // ) - // importSjsFile(spread, new File(a)) - - // handleBindForm() emits('initComplete', spread) - // const res = await fetch('http://111.198.10.15:21408/test/校准证书_1742974211244.sjs') - // const file = await res.blob() - // importSjsFile(spread, file).then(() => { - // handleBindForm() - // }) } // -----------------------------------导入导出------------------------------------------------- // 执行导入文件 const handleImportFile = (file: any, data: any) => { + // 导入完成 importFile(spread, file).then(() => { - // handleBindForm(data) + // 绑定数据 bindForm(spread, data) + + // getSpanInfo(sheet, 52, 20) + // bindPicture(sheet, ) + handleBindPicture() }) } // 执行导出文件 @@ -72,6 +56,31 @@ console.log('获取到文件', blob) } +// -----------------------------------图片------------------------------------------------------- +function handleBindPicture() { + const sheet = spread.getSheetFromName('证书首页') // 获取证书首页sheet页 + // 二维码章 + bindPicture( + sheet, + 'qr', + qrImg, + 150, + 150, + 51, + 19, + ) + // 校准专用章 + bindPicture( + sheet, + 'singer', + 'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png', + 180, + 120, + 36, + 13, + ) +} + // -----------------------------------数据绑定------------------------------------------------- // 表格绑定 function handleBindTable() { @@ -115,8 +124,8 @@ dialogVisible.value = true nextTick(() => { designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) - spread = designer.getWorkbook() - sheet = spread.getActiveSheet() + spread = designer.getWorkbook() // 创建工作簿实例 + sheet = spread.getActiveSheet() // 获取当前活动工作表 initComplete() }) } diff --git a/src/views/business/lab/excelEdit/methods/bind/bindForm.ts b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts new file mode 100644 index 0000000..a17dcd4 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindForm.ts @@ -0,0 +1,54 @@ +import GC from '@grapecity-software/spread-sheets' +import dayjs from 'dayjs' +const certTypeMap: { [key: string]: string } = { + 1: '校准证书' +} + +/** + * 处理表单数据字段的对应 + * @param type 模板类型 + * @param data 要处理的数据 + */ +const solveFormData = (type: string, data: any) => { + let result: any + switch (type) { + case '校准证书': + result = { + ...data, + certificateNo: data.certificateReportCode, // 证书编号 + yearD: data.deliverTime ? dayjs(data.deliverTime).year() : '', // 接收日期年 + monthD: data.deliverTime ? dayjs(data.deliverTime).month() : '', // 接收日期月 + dayD: data.deliverTime ? dayjs(data.deliverTime).day() : '', // 接收日期日 + yearC: data.calibrationTime ? dayjs(data.calibrationTime).year() : '', // 校准日期年 + monthC: data.calibrationTime ? dayjs(data.calibrationTime).month() : '', // 校准日期月 + dayC: data.calibrationTime ? dayjs(data.calibrationTime).day() : '', // 校准日期日 + dttTest: { + propA: '我是测试字段' + } + } + break + default: + break + } + + return result +} + +/** + * 表单绑定 + * @param spread + * @param data + */ +export default function bindForm(spread: any, data: any, type = '校准证书') { + // 处理数据 + const solvedData = solveFormData(type, data) + // 获取sheet页数量 + const seetCount = spread.getSheetCount() + for (let i = 0; i < seetCount; i++) { + // 单元格绑定数据源 + const source = new GC.Spread.Sheets.Bindings.CellBindingSource(solvedData) + const sheet = spread.getSheet(i) // 获取第几个sheet页 + // 填入数据 + sheet.setDataSource(source) + } +} diff --git a/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts new file mode 100644 index 0000000..2642f36 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/bind/bindPicture.ts @@ -0,0 +1,29 @@ +/** + * 绑定图片 + */ +import GC from '@grapecity-software/spread-sheets' + +/** + * 图片绑定 + * @param spread + * @param data + */ +export function bindPicture( + sheet: any, + name: string, // 为添加的图片指定一个唯一的名称。这个名称可用于后续对该图片进行引用、操作或管理。 + url: string, // 图片的来源地址,可以是本地文件路径(在支持的环境下),也可以是网络图片的 URL + width: number, // 图片的宽度,单位为像素。可以根据需要调整图片的显示宽度。 + height: number, // 图片的高度,单位为像素。可以根据需要调整图片的显示高度。 + startRow: number, // 设置图片在工作表中起始行的索引。索引从 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + startColumn: number, // 设置图片在工作表中起始列的索引 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + startRowOffset = 0, // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + startColumnOffset = 0, // 设置图片相对于起始列的水平偏移量 0 开始计数,若为为 16,意味着图片的起始行是工作表中的第 17 行(因为索引从 0 开始) + left = 0, // 图片在工作表中的左偏移量,即图片左上角相对于工作表左上角的水平距离,单位通常为像素 + top = 0, // 图片在工作表中的上偏移量,即图片左上角相对于工作表左上角的垂直距离,单位通常为像素。 +) { + const picture = sheet.pictures.add(name, url, left, top, width, height) + picture.startRow(startRow) + picture.startColumn(startColumn) // 设置图片在工作表中起始列的索引 + picture.startRowOffset(startRowOffset) // 用于设置图片相对于起始行的垂直偏移量,单位通常为像素。如果设置为 10,表示图片会相对于起始行向下偏移 10 像素。 + picture.startColumnOffset(startColumnOffset) // 设置图片相对于起始列的水平偏移量 +} diff --git a/src/views/business/lab/excelEdit/methods/file.ts b/src/views/business/lab/excelEdit/methods/file.ts index 9ef14b5..61510af 100644 --- a/src/views/business/lab/excelEdit/methods/file.ts +++ b/src/views/business/lab/excelEdit/methods/file.ts @@ -59,11 +59,11 @@ spread.open( file, () => { - console.log('importFile:导入sjs文件成功') + console.log('importFile-open:导入sjs文件成功') resolve('') }, (e: any) => { - console.log('importFile:上传sjs文件发生错误', e) + console.log('importFile-open:上传sjs文件发生错误', e) }, ) } @@ -71,11 +71,11 @@ spread.import( file, () => { - console.log('importFile:导入文件成功') + console.log('importFile-import:导入文件成功') resolve('') }, (e: any) => { - console.log('importFile:上传文件发生错误', e) + console.log('importFile-import:上传文件发生错误', e) }, ) }