Extended POC for images.

[gdoteof]

This is a slight improvement in that it also allows offsetting and setting the image size.

[gdoteof]

Example of how I am using this:

function _get_logo(logo_path){
  var bitmap = fs.readFileSync(logo_path);
  var scale = 1.2;
  var heightEMU  = _inch2emu(.63, scale);
  var widthEMU   = _inch2emu(1.15, scale);
  var heightOff  = _inch2emu(.07, scale);
  var widthOff   = _inch2emu(.672 , (1/scale));
  return [
    {
      name: 'logo.png',
      data: new Buffer(bitmap).toString('base64'),
      opts: { base64: true },
      attrs: { editAs: 'absolute' },
      type: 'png',
      spPr: {
        xfrm: {
          off: { x: 0, y: 0 },
          ext: { cx: widthEMU, cy: heightEMU, }
        }
      },
      position: {
        type:  'twoCellAnchor',
        from:  {  col: 0, row : 1  , colOff: widthOff, rowOff: heightOff},
        to:    {  col: 0, row : 4  , colOff: widthEMU + widthOff, rowOff: heightEMU + heightOff}
      }
    }
  ]
}

[JesusFregoso]

hello im using your example but i getting this error when trying to open the file
Part replaced: /xl/worksheets/sheet1.xml part with XML error. Load error. Line 2, column 0.

var base64 = getBase64Image(document.getElementById("imagenEmpresa"));
me.wb.Sheets[name]['!images'] = [];
me.wb.Sheets[name]['!images'].push({
	name: 'image.png',
	data: base64,
	opts: { base64: true },
	attrs: { editAs: 'absolute' },
	type: 'png',
	position: {
	       type:  'twoCellAnchor',
	       from:  {  col: 2, row : 15  , colOff: 0, rowOff: 0},
	       to:    {  col: 4, row : 20  , colOff: 0, rowOff: 0}
	}
})
im using json_to_sheet from the master repositorie idk if that could be the problem 
function parseData(ws,pageConfig,datos){
		var abc = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
		var start = abc.slice(pageConfig.startCell);
		var end = start.slice(me.cellsLength-2);
		var ref = start[0]+pageConfig.startRow+':'+end[0]+(pageConfig.startRow+datos.length);
		var range = XLSX.utils.decode_range(ref);
		ws = XLSX.utils.json_to_sheet(datos,{},range);
		range = XLSX.utils.decode_range(ws['!ref']);
		for(var C = 1; C < range.e.r-range.s.r; C++) {
			for (var i = 0; i <= range.e.c-range.s.c; i++) {
		  		var address  = XLSX.utils.encode_cell({
							c: i+range.s.c,
							r: C+range.s.r
					}); // <-- first row, column number C
				ws[address].s = me.data[C-1].cells[i].style;
				if (ws[address].s.font) {
					ws[address].s.font.sz = '10'
					ws[address].s.font.name = 'arial'
				}else{
					ws[address].s.font = {
						sz : '10',
						name : 'arial'
					}
				}
			}
		}
		return ws;
	}
 also i modify the json_to_sheet function so i can send it as an argument the range where i want to start writing the cells

[gdoteof]

You don't get the error if you take out the part with the images?

The shape (spPr) might be necessary as well.

    spPr: {
        xfrm: {
          off: { x: 0, y: 0 },
          ext: { cx: widthEMU, cy: heightEMU, }
        }
      },

[gdoteof]

This is what I use:

function _inch2emu(inch, scale){
  scale = scale || 1;
  return Math.floor(scale * inch * 914400);
}

[JesusFregoso]

thanks already find it 2017-11-03 9:20 GMT-07:00 geoff golder <[email protected]>:

…

This is what I use: function _inch2emu(inch, scale){ scale = scale || 1; return Math.floor(scale * inch * 914400); } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#84 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIIU9fbH92ra-IPGtVONH29bOIryHidnks5syz1pgaJpZM4PC1sm> .

-- Jesus Fregoso Web Developer, Triples Soluciones Móvil: 6692184214 Dirección: Mazatlan, Sinaloa Email: [email protected] <[email protected]> [image: Facebook] <https://www.facebook.com/jessFregoso0> [image: Linkedin] <https://www.linkedin.com/in/jesus-fregoso-osuna-57b06ba5>

[JesusFregoso]

style the same error :/ i guest i have to keep looking about it 2017-11-03 9:24 GMT-07:00 Jesus Fregoso <[email protected]>:

…

thanks already find it 2017-11-03 9:20 GMT-07:00 geoff golder ***@***.***>: > This is what I use: > > function _inch2emu(inch, scale){ > scale = scale || 1; > return Math.floor(scale * inch * 914400); > } > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#84 (comment)>, or mute > the thread > <https://github.com/notifications/unsubscribe-auth/AIIU9fbH92ra-IPGtVONH29bOIryHidnks5syz1pgaJpZM4PC1sm> > . > -- Jesus Fregoso Web Developer, Triples Soluciones Móvil: 6692184214 Dirección: Mazatlan, Sinaloa Email: ***@***.*** ***@***.***> [image: Facebook] <https://www.facebook.com/jessFregoso0> [image: Linkedin] <https://www.linkedin.com/in/jesus-fregoso-osuna-57b06ba5>

-- Jesus Fregoso Web Developer, Triples Soluciones Móvil: 6692184214 Dirección: Mazatlan, Sinaloa Email: [email protected] <[email protected]> [image: Facebook] <https://www.facebook.com/jessFregoso0> [image: Linkedin] <https://www.linkedin.com/in/jesus-fregoso-osuna-57b06ba5>

[gdoteof]

Windows only, but HIGHLY recommended if you are trying to debug openxml

https://www.microsoft.com/en-us/download/details.aspx?id=30425

You want the open xml productivity tool; it will give you much, much better errors than what excel gives you.

[JesusFregoso]

i already solve thank you for the tips :D 2017-11-03 9:33 GMT-07:00 geoff golder <[email protected]>:

…

Windows only, but HIGHLY recommended if you are trying to debug openxml https://www.microsoft.com/en-us/download/details.aspx?id=30425 You want the open xml productivity tool; it will give you much, much better errors than what excel gives you. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#84 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIIU9bFeNcl3tJZbmfd8ocqWd1faGOOHks5sy0BNgaJpZM4PC1sm> .

-- Jesus Fregoso Web Developer, Triples Soluciones Móvil: 6692184214 Dirección: Mazatlan, Sinaloa Email: [email protected] <[email protected]> [image: Facebook] <https://www.facebook.com/jessFregoso0> [image: Linkedin] <https://www.linkedin.com/in/jesus-fregoso-osuna-57b06ba5>

[subrat7]

Here is my code but i don't know why i am not able to get the image in excel file.

const input = document.getElementById("Demodata");
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
wb["!images"]= [];
wb["!images"].push({
name: 'image1.png',
data: imgData,
opts: { base64: true },
position: {
type: 'twoCellAnchor',
attrs: { editAs: 'oneCell' },
from: {
col: 0,
row: 0,
colOff: 1335173,
rowOff: 107424,
},
to: {
col: 0,
row: 0,
colOff: 1729508,
rowOff: 243441,
},
}
});
var wbout = _xlsx2.default.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary'});
(0, _fileSaver.saveAs)(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), this.props.filename || 'data.xlsx');
});

Anybody please help me.
Thanks for advance.

[gdoteof]

const input = document.getElementById("Demodata");
html2canvas(input)
    .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        wb["!images"] = [];
        wb["!images"].push({
            name: 'image1.png',
            data: imgData,
            opts: {
                base64: true
            },
            position: {
                type: 'twoCellAnchor',
                attrs: {
                    editAs: 'oneCell'
                },
                from: {
                    col: 0,
                    row: 0,
                    colOff: 1335173,
                    rowOff: 107424,
                },
                to: {
                    col: 0,
                    row: 0,
                    colOff: 1729508,
                    rowOff: 243441,
                },
            }
        });
        var wbout = _xlsx2.default.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'binary'
        });
        (0, _fileSaver.saveAs)(new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
        }), this.props.filename || 'data.xlsx');
    });

[gdoteof]

@subrat7

It looks like you are missing these two fields on the root of the object

type: 'png',
spPr: {
    xfrm: {
          off: { x: 0, y: 0 },
          ext: { cx: widthEMU, cy: heightEMU, }
   }
},