How to custom column on exported file when call export item on the menu

Posted by: duyxxnguyen on 1 December 2023, 7:32 am EST

  • Posted 1 December 2023, 7:32 am EST - Updated 1 December 2023, 7:37 am EST

    Hi there,

    I have a matter with the function exporting Excel file on the menu as the attachment .

    On the UI, I added a column that is a checkbox as the attachment file (web-ui-spreadjs.png).

    I used the function export to excel file on the menu. But, the file only show the value True/False on the Cell.

    I wanna custom the value on for the check box column:

    • Table head is a text
    • Data of check box => True value is “X”, False value is empty

      How can I do that?

    https://developer.mescius.com/spreadjs/demos/features/spreadjs-file-format/overview/purejs

  • Posted 5 December 2023, 1:47 am EST

    Hi,

    Apologies for the late response. It took me some time to find the best solution for your use case. By default, when you export to the Excel file, the checkbox cells are marked TRUE/FALSE based on their value as Microsoft Excel doesn’t support CheckBox Cell Type.

    To overcome this, you need to create a clone of the workbook, replace the values for the CheckBox Cell Type. You could achieve this by overriding the “exportExcelSJSFormat” of the FileMenuHandler. Kindly refer to the following code snippet and the sample:

    GC.Spread.Sheets.Designer.FileMenuHandler.exportExcelSJSFormat = function (designer, options) {
        var dialogOption = {
            fileName: ""
        };
        GC.Spread.Sheets.Designer.showDialog("fileNameDialog", dialogOption, (result) => {
            if (!result) {
                return;
            }
            const fileName = "export.xlsx";
            if (result.fileName !== "") {
                fileName = result.fileName + ".xlsx";
            }
    
            // Clone a Workbook
            let newWorkbook = new GC.Spread.Sheets.Workbook();
            newWorkbook.fromJSON(spread.toJSON({ includeBindingSource: true }));
    
            newWorkbook.suspendPaint();
            newWorkbook.suspendCalcService();
            newWorkbook.suspendEvent();
    
            // Iterate through all the sheets
            for (let i = 0; i < newWorkbook.getSheetCount(); i++) {
                let sheetInstance = newWorkbook.getSheet(i);
                let usedRange = sheetInstance.getUsedRange(GC.Spread.Sheets.UsedRangeType.data);
                if (usedRange) {
                    for (let i = usedRange.row; i < usedRange.row + usedRange.rowCount; i++) {
                        for (let j = usedRange.col; j < usedRange.col + usedRange.colCount; j++) {
                            let cellType = sheetInstance.getCellType(i, j);
                            // Check if the Cell Type is CheckBox
                            if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
                                let value = sheetInstance.getValue(i, j);
                                // Replace the Values Where the Cell Type is CheckBox
                                if (value) {
                                    // True Value is X
                                    sheetInstance.setValue(i, j, "X");
                                } else {
                                    sheetInstance.setValue(i, j, null);
                                }
                            }
                        }
                    }
                }
            }
    
            newWorkbook.resumeEvent();
            newWorkbook.resumeCalcService();
            newWorkbook.resumePaint();
    
            // export spread to xlsx, ssjson, csv file.
            newWorkbook.export(function (blob) {
                // save blob to a file
                saveAs(blob, fileName);
            }, function (e) {
                console.log(e);
            }, options.exportXlsxOptions);
    
        }, (error) => {
            console.error(error);
        },);
    }

    Sample: https://jscodemine.grapecity.com/share/Yk5QvLd5UkSTRcvFc1Gz-w/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    Also, I couldn’t understand what you mean by “Table head is a text”. However, you could use the similar approach to make changes in the newWorkbook.

    References:

    showDialog method: https://developer.mescius.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#showdialog

    getUsedRange method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getusedrange

    Regards,

    Ankit

  • Posted 6 July 2025, 10:57 pm EST - Updated 6 July 2025, 11:02 pm EST

    Hi,

    I’m using spreadjs version 18.1.2. I cannot find FileMenuHandler in this package. Can you please let me know how I can customize print action from ribbon menu ? Thanks !

  • Posted 7 July 2025, 8:30 am EST - Updated 7 July 2025, 8:36 am EST

    Hi,

    The FileMenuHandler is available in version 18.1.2 as well — please refer to the attached image for reference.

    However, it’s not defined in TypeScript since it’s intended for internal use. You can bypass the TypeScript error by using

    any
    .

    Regarding your question: “Can you please let me know how I can customize the print action from the ribbon menu?” — could you please clarify the type of customization you’re looking for, along with an example? This will help us better understand your requirement and assist you accordingly.

    Regards,

    Priyam

  • Posted 7 July 2025, 12:10 pm EST - Updated 7 July 2025, 12:15 pm EST

    Hi Priyam,

    I’m finding the way to override this action “export to excel”

    Because now it cannot export background image, so I am planning to convert background image into shapes via custom export. Do you think this can be done by custom export ? Thanks !

  • Posted 8 July 2025, 4:25 am EST

    Hi,

    As I understand, you’re exporting a file to Excel, but the background image is not retained in the exported file.

    SpreadJS allows setting background images at both the workbook and worksheet levels. You can refer to the following demos for more details:

    However, Excel only supports background images at the worksheet level. So if you’ve applied a background image at the workbook level in SpreadJS, it will not persist in the exported Excel file—this appears to be the scenario you’re encountering. You’d like this background to instead be exported as a shape.

    To achieve this, you can convert the workbook-level background image to a shape before exporting, using a custom export implementation via the fileMenuHandler, similar to how we handled checkboxes exporting as “x”.

    You can retrieve the workbook background image using spread.options.backgroundImage, and add it as a shape with:

    sheet.shapes.addPictureShape(“pic1”, “./test.png”, 100, 100, 200, 200);

    Reference:

    Regards,

    Priyam

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels