search

protobi / js-xlsx

XLSX / XLSM / XLSB (Excel 2007+ Spreadsheet) / ODS parser and writer
http://oss.sheetjs.com/js-xlsx
Other
817 stars 417 forks source link

Extended POC for images. #84

Open gdoteof opened 6 years ago

gdoteof commented 6 years ago

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

gdoteof commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

This is what I use:

function _inch2emu(inch, scale){
  scale = scale || 1;
  return Math.floor(scale * inch * 914400);
}
JesusFregoso commented 6 years ago

thanks already find it

2017-11-03 9:20 GMT-07:00 geoff golder notifications@github.com:

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: jessfregoso0@gmail.com asarazm@gmail.com [image: Facebook] https://www.facebook.com/jessFregoso0 [image: Linkedin] https://www.linkedin.com/in/jesus-fregoso-osuna-57b06ba5

JesusFregoso commented 6 years ago

style the same error :/ i guest i have to keep looking about it

2017-11-03 9:24 GMT-07:00 Jesus Fregoso jessfregoso0@gmail.com:

thanks already find it

2017-11-03 9:20 GMT-07:00 geoff golder notifications@github.com:

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: jessfregoso0@gmail.com asarazm@gmail.com [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: jessfregoso0@gmail.com asarazm@gmail.com [image: Facebook] https://www.facebook.com/jessFregoso0 [image: Linkedin] https://www.linkedin.com/in/jesus-fregoso-osuna-57b06ba5

gdoteof commented 6 years ago

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 commented 6 years ago

i already solve thank you for the tips :D

2017-11-03 9:33 GMT-07:00 geoff golder notifications@github.com:

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: jessfregoso0@gmail.com asarazm@gmail.com [image: Facebook] https://www.facebook.com/jessFregoso0 [image: Linkedin] https://www.linkedin.com/in/jesus-fregoso-osuna-57b06ba5

subrat7 commented 6 years ago

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 commented 6 years ago 
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 commented 6 years ago

@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, }
   }
},