diff --git a/src/views/business/lab/excelEdit/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts index 481d8a8..f46c07f 100644 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ b/src/views/business/lab/excelEdit/bindForm.ts @@ -37,11 +37,15 @@ * @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/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts index 481d8a8..f46c07f 100644 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ b/src/views/business/lab/excelEdit/bindForm.ts @@ -37,11 +37,15 @@ * @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 5f89fd9..3ea13b2 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -20,7 +20,8 @@ // 注意：spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序 import '@grapecity-software/spread-sheets-designer-resources-cn' import '@grapecity-software/spread-sheets-designer' -import { importFile, importSjsFile } from './index' +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' @@ -57,14 +58,21 @@ // }) } -// -----------------------------------一些表格操作------------------------------------------------- +// -----------------------------------导入导出------------------------------------------------- +// 执行导入文件 const handleImportFile = (file: any, data: any) => { - importSjsFile(spread, file).then(() => { + importFile(spread, file).then(() => { // handleBindForm(data) bindForm(spread, data) }) } +// 执行导出文件 +const handleExportFile = async () => { + const blob = await exportFile(spread, 'xlsx', true) + console.log('获取到文件', blob) +} +// -----------------------------------数据绑定------------------------------------------------- // 表格绑定 function handleBindTable() { console.log('执行表格绑定') @@ -130,6 +138,9 @@ + + 导出 + diff --git a/src/views/business/lab/excelEdit/bindForm.ts b/src/views/business/lab/excelEdit/bindForm.ts index 481d8a8..f46c07f 100644 --- a/src/views/business/lab/excelEdit/bindForm.ts +++ b/src/views/business/lab/excelEdit/bindForm.ts @@ -37,11 +37,15 @@ * @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 5f89fd9..3ea13b2 100644 --- a/src/views/business/lab/excelEdit/excelEditDialog.vue +++ b/src/views/business/lab/excelEdit/excelEditDialog.vue @@ -20,7 +20,8 @@ // 注意：spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序 import '@grapecity-software/spread-sheets-designer-resources-cn' import '@grapecity-software/spread-sheets-designer' -import { importFile, importSjsFile } from './index' +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' @@ -57,14 +58,21 @@ // }) } -// -----------------------------------一些表格操作------------------------------------------------- +// -----------------------------------导入导出------------------------------------------------- +// 执行导入文件 const handleImportFile = (file: any, data: any) => { - importSjsFile(spread, file).then(() => { + importFile(spread, file).then(() => { // handleBindForm(data) bindForm(spread, data) }) } +// 执行导出文件 +const handleExportFile = async () => { + const blob = await exportFile(spread, 'xlsx', true) + console.log('获取到文件', blob) +} +// -----------------------------------数据绑定------------------------------------------------- // 表格绑定 function handleBindTable() { console.log('执行表格绑定') @@ -130,6 +138,9 @@ + + 导出 + diff --git a/src/views/business/lab/excelEdit/methods/file.ts b/src/views/business/lab/excelEdit/methods/file.ts new file mode 100644 index 0000000..9ef14b5 --- /dev/null +++ b/src/views/business/lab/excelEdit/methods/file.ts @@ -0,0 +1,170 @@ +/** + * 文件公共方法 + */ + +import * as GC from '@grapecity-software/spread-sheets' +// 文件类型常量定义 +const FileType = { + SJS: 'sjs', + Excel: 'xlsx', + SSJson: 'ssjson', +} + +/** + * 获取文件类型 + * @param file 文件 + * @returns + */ +export function getFileType(file: Blob) { + if (!file) { + return + } + if (!isBlob(file)) { + return + } + const extensionName = file.type + if (extensionName === 'sjs') { + return FileType.SJS + } + else if (extensionName === 'xlsx' || extensionName === 'xlsm') { + return FileType.Excel + } + else if (extensionName === 'ssjson' || extensionName === 'json') { + return FileType.SSJson + } + else { + console.log('getFileType：未获取到文件类型') + } +} +/** + * 判断文件是否是blob类型 + * @param file + * @returns + */ +function isBlob(file: unknown): file is Blob { + return file instanceof Blob +} + +/** + * @param spread spread实例 + * @param file 文件 + * @returns + */ +export async function importFile(spread: any, file: Blob) { + const fileType = getFileType(file) + console.log('获取到的文件类型', fileType, fileType === FileType.SJS) + + return new Promise((resolve) => { + if (fileType === FileType.SJS) { + spread.open( + file, + () => { + console.log('importFile：导入sjs文件成功') + resolve('') + }, + (e: any) => { + console.log('importFile：上传sjs文件发生错误', e) + }, + ) + } + else { + spread.import( + file, + () => { + console.log('importFile：导入文件成功') + resolve('') + }, + (e: any) => { + console.log('importFile：上传文件发生错误', e) + }, + ) + } + }) +} + +// 获取文件导出选项 +function getExportOptions(fileType: any) { + return { + fileType: GC.Spread.Sheets.FileType[fileType], + // 包含绑定数据源,文件中包含数据绑定时，是否导出绑定数据 + includeBindingSource: true, + // 是否保存为视图 + saveAsView: true, + // 导出文件时是否包含样式 + includeStyles: true, + // 导出文件时是否包含公式 + includeFormulas: true, + // 包含未使用名称,导出文件时是否包含无用的名称管理器,若文件中包含大量无用的名称管理器，设置为true可减小文件大小 + includeUnusedNames: true, + // 包含有样式但无数据的最小范围单元格,是否导出无用的空单元格,文件中包含大量空白单元格，希望提升导出效率时，建议开启。 + includeEmptyRegionCells: true, + // 包含自动合并的单元格,导出文件是否将自动合并的单元格视为真是合并单元格,当文件中包含自动合并的单元格，导出Excel时，希望成为真实的合并单元格时，建议开启 + includeAutoMergedCells: true, + // 导出时是否包含计算缓存数据，计算缓存数据可以更快的打开文件。 + includeCalcModelCache: false, + } +} + +/** + * 下载文件操作 + * @param blob 文件blob + * @param filename 文件名称 + */ +function saveAs(blob: Blob, filename: string) { + const link = document.createElement('a') + link.href = URL.createObjectURL(blob) + link.download = filename + document.body.appendChild(link) + link.click() + document.body.removeChild(link) +} + +/** + * 文件导出 + * @param spread + * @param fileType 文件类型 + * @param getFileName 导出文件名称 + * @param onlyFetchFile 仅获取文件， 不进行导出下载 + */ +export function exportFile( + spread: any, + fileType: string, + onlyFetchFile = false, + getFileName = 'exportFile', +) { + const options = getExportOptions(fileType) + const fileName = `${getFileName}.${fileType}` + return new Promise((resolve) => { + // 根据文件类型调用不同的导出方法 + if (fileType === FileType.SJS) { + spread.save( + (blob: Blob) => { + if (!onlyFetchFile) { + saveAs(blob, fileName) + } + console.log('导出成功回调', blob) + resolve(blob) + }, + (error: any) => { + console.log('导出失败回调', error) + }, + options, + ) + } + else { + spread.export( + (blob: Blob) => { + if (!onlyFetchFile) { + saveAs(blob, fileName) + } + console.log('导出成功回调', blob) + resolve(blob) + }, + (error: any) => { + console.log('导出失败回调', error) + }, + options, + ) + } + }) +}