Error with images in SpreadJS

Posted by: chst8937 on 11 February 2025, 8:14 pm EST

    • Post Options:
    • Link

    Posted 11 February 2025, 8:14 pm EST - Updated 11 February 2025, 8:26 pm EST

    Hello,

    When I tried to export spread to xlsx, this error occurred.

    Here is my cord.

    
    // 1. load Json to Xlsx using fromJSON
    var jsonOptions = {
    				includeBindingSource: true,
    				ignoreStyle: false,
    				ignoreFormula: false,
    				saveAsView: true,
    				rowHeadersAsFrozenColumns: false,
    				columnHeadersAsFrozenRows: false,
    				includeAutoMergedCells: true
    };
    let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    function loadXlsxDB() {
    	$.ajax({
    		type: "GET",
    		url: "/SpreadJs/Excel/LoadJson",
    		success: function (response) {
    			spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    			spread.fromJSON(JSON.parse(response), jsonOptions);
    			spread.resumeEvent();
    			spread.resumeCalcService();
    			spread.resumePaint();
    			sheet = spread.getSheet(spread.getSheetIndex("sheet1"));
    		},
    		error: function (request, status, error) {
    			console.log(request.responseText, status, error);
    		}
    	});
    }
    
    // 2. load data by clicking btn loading this function.
    function loadContentXlsx() {
    	getHeader();
    	getContent();
    	getFooter();
    }
    
    //3. among those methods, In "getFooter()" methods, some images loaded.
    function getFooter() {
    	let markArray = new Array();
    	markArray.push("/images/ShippingMark/shippingmark1.png");
    	markArray.push("/images/ShippingMark/shippingmark2.png");
    	markArray.push("/images/ShippingMark/shippingmark3.png");
    	markArray.push("/images/ShippingMark/shippingmark4.png");
    	markArray.push("/images/ShippingMark/shippingmark5.png");
    
    	let row = 163; // images started here
    	let col = 0;
    	let nextX = 0;
    	let nextY = 0;
    	for(let i=0 ; i<markArray.length; i++) {
    		let image = sheet.shapes.addPictureShape(i, markArray[i], 0, 0, 0, 0);
    // load images in specific row and column.
    		image.startRow(row);
    		image.startColumn(col);
    		switch(i) {
    			case 0:
    			case 3:
    				col += 3;
    				break;
    			case 1:
    			case 4:
    				col += 5;
    				break;
    			case 2:
    			case 5:
    				row += 9;
    				col = 0;
    				break;
    		}
    	}
    }
    
    // export SpreadJS to xlsx file
    				function saveXlsx() {
    					let printInfo = sheet.printInfo();
    
    					printInfo.repeatRowStart(0);
    					printInfo.repeatRowEnd(5);
    
    					printInfo.columnStart(0);
    					printInfo.columnEnd(16);
    
    					printInfo.pageRange("A1:Q240");
    					printInfo.zoomFactor(0.62);
    
    					sheet.setRowPageBreak(94, true);
    					sheet.setRowPageBreak(181, true);
    					printInfo.centering(GC.Spread.Sheets.Print.PrintCentering.horizontal);
    
    					printInfo.pageHeaderFooter({
    						normal: {
    							footer: {
    								right: "&P/&N"
    							}
    						}
    					});
    					printInfo.margin({ top: 60, bottom: 20, left: 23, right: 23, header: 30, footer: 30 }); 
    					printInfo.paperSize(new GC.Spread.Sheets.Print.PaperSize(GC.Spread.Sheets.Print.PaperKind.a4));
    
    					let fileType = "xlsx";
    					let fileName = "title"+ "." + fileType;
    					spread.export(
    						function(blob) {
    							console.log(blob);
    							saveAs(blob, fileName);
    						},
    					function (e) { console.log(e); }, saveOptions
    					);
    				}

    there are two types of images in SpreadJS.

    1. Base images (which are saved in base64 in json file, so when I load json, it is loaded together)
    2. Data images (which are loaded by button)

    The problems are :

    1. When I load json String, the base images are duplicated. ( I attached sample json file and capture of SpreadJS)

    1. original excel file



    2) SpreadJS (using fromJSON)

    (I moved images for examples, but it appear exact same location)

    It occurs when I save SpreadJS to xlsx file, so finally there are four same images on xlsx file.

    xlsx json file.zip

    1. When I load Data images and try to saving it to xlsx file, this error occurs.

    Is there any problems with my code, or should I fix my code?

    I need some help.

    Thank you.

  • Posted 12 February 2025, 6:00 am EST

    Hi,

    Thank you for reaching out. We understand that you are facing two key issues with image handling in SpreadJS:

    • Base Images are Duplicated:

    When loading a JSON file into SpreadJS using fromJSON(), base64-encoded images appear duplicated.

    • Export Error with Data Images:

    Data images (dynamically loaded via a button) result in an error when attempting to export the spreadsheet to an XLSX file.

    We have attempted to replicate this behavior on our end but were unable to reproduce the issues. Specifically:

    We used the JSON sample you provided and successfully loaded it into SpreadJS without observing any duplication of base images.

    var loadJson = document.getElementById("loadJson");
    loadJson.addEventListener('click', function (e) {
      spread.fromJSON(JsonData);
    })

    We dynamically loaded images using the button, and all images were exported correctly without any errors.

    var loadImages = document.getElementById("loadImages");
    loadImages.addEventListener("click", function (e) {
    
    	let markArray = new Array();
    	markArray.push("/images/ShippingMark/shippingmark1.png");
    	markArray.push("/images/ShippingMark/shippingmark2.png");
    	markArray.push("/images/ShippingMark/shippingmark3.png");
    	markArray.push("/images/ShippingMark/shippingmark4.png");
    	markArray.push("/images/ShippingMark/shippingmark5.png");
    
    
    	let sheet = spread.getSheet(0);
    	let left = 0; // images started here
    	let top = 0;
    	let width = 0;
    	let height = 0;
    	for (let i = 0; i < markArray.length; i++) {
    		left += 200;
    		let image = sheet.shapes.addPictureShape("i", markArray[i], left, top, width, height);
    	}
    
    })
    
    var jsonOptions = {
    	includeBindingSource: true,
    	ignoreStyle: false,
    	ignoreFormula: false,
    	saveAsView: true,
    	rowHeadersAsFrozenColumns: false,
    	columnHeadersAsFrozenRows: false,
    	includeAutoMergedCells: true
    };
    
    
    var ExportWorkbook = document.getElementById("export");
    ExportWorkbook.addEventListener("click", function (e) {
    	let fileType = "xlsx";
    	let fileName = "title" + "." + fileType;
    	spread.export(
    		function (blob) {
    			console.log(blob);
    			saveAs(blob, fileName);
    		},
    		function (e) { console.log(e); }, jsonOptions
    	);
    })

    To further investigate, could you please provide a minimal working sample where this issue is reproducible? Alternatively, you may try reproducing the issue using the sample attached below. This will help us diagnose the root cause more effectively.

    Sample : Sample.zip

    References :-

    We appreciate your cooperation and look forward to your response.

    Best regards,

  • Posted 12 February 2025, 8:05 pm EST

    Hello,

    Thank you for trying to help me.

    Here is my code and test files.

    Spread Test.zip

    By finding differences with my code and your answer and searching API, export error with Data Images is solved. Thank you.

    but base images are still duplicated.

  • Posted 13 February 2025, 7:36 am EST - Updated 13 February 2025, 7:42 am EST

    Hi,

    I’ve attempted to replicate the behavior using the information provided, but I haven’t been successful. In my tests, loading the JSON does not result in duplicating the image. Please refer to the attached “Steps.gif” and “Sample.zip” for context.

    Gif:

    Sample: Sample.zip

    Could you please share a minimal working example or modify the current sample so that it replicates the behavior you’re observing? Additionally, a GIF or video demonstrating the issue would be very helpful. This will allow me to investigate the problem more thoroughly.

    Regards,

    Priyam

  • Posted 13 February 2025, 8:55 pm EST

    Hello,

    Because my whole project file is too big, here is download link.

    https://drive.google.com/file/d/1c4ty0As81zLRj2dptNDkbmSAxIiDxl6b/view?usp=drive_link

    please use http://localhost:(your port)/Sample/Excel/Content1_base

    and I made GIF so you can check.

    Thank you.

  • Posted 14 February 2025, 6:24 am EST

    Hi,

    Thank you for sharing the project with us. We have successfully replicated the issue you mentioned on our end, and after a thorough review, we identified the root cause. The issue occurs because the script file spreadjs/js/gc.spread.sheets.shapes.17.1.9.min.js has been imported twice in your Content1_base.cshtml file.

    To resolve this, we recommend removing or commenting out line 17 in Content1_base.cshtml where the script is being included for the second time. This will prevent duplication and should resolve the issue you’re experiencing.

    Please feel free to reach out if you encounter any further issues or require additional guidance.

    Best Regards,

Need extra support?

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

Learn More

Forum Channels