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 https://github.com/protobi/js-xlsx/pull/84#issuecomment-341753408, 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 [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 https://github.com/protobi/js-xlsx/pull/84#issuecomment-341753408, 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

-- 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 https://github.com/protobi/js-xlsx/pull/84#issuecomment-341757253, 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, }
   }
},