Problem with exporting xls

Asked

Viewed 73 times

0

I am making script to export a table pro Excel when I open it shows null follows the code:

function M(){
    var nProcesso = document.getElementById('nProcesso').value;
    var Autor = document.getElementById('Autor').value;
    var Reu = document.getElementById('Reu').value;
    var Data = document.getElementById('Data').value;
    var Especie = document.getElementById('Especie').value;
    var Vara = document.getElementById('Vara').value;




    document.getElementById('conteudo').innerText = "<table class='table' id='tblExport'>" + 
"<thead>" +
 "<tr>" +
    "<th>N° Processo</th>" +
    "<th>Autor</th>" +
    "<th>Reu</th>" +
    "<th>Data</th>" +
    "<th>Especie</th>" +
    "<th>Vara</th>" +
  "</tr>" +
"</thead>" +
"<tbody>" +
    "<tr>" +
    "<td>" + nProcesso + "</td>" +
    "<td>" + Autor + "</td>" +
    "<td>" + Reu + "</td>" +
    "<td>" + Data + "</td>" +
    "<td>" + Especie + "</td>" +
    "<td>" + Vara + "</td>" +
    "</tr>" 
+ "</tbody>" +  "</table>";

}
function ExportarExl() {
  let data = new Date().toISOString().slice(0,10);
  var texto = document.getElementById('tblExport').innerText;
  let titulo = document.getElementById('nProcesso').value;
  var blob = new Blob([texto], { type: "text/plain;charset=utf-8" });
  saveAs(blob, titulo + " " + data + ".xls");
}

Function saveAs:

It is a component that can be found in this Git.

Code:

/*
* FileSaver.js
* A saveAs() FileSaver implementation.
*
* By Eli Grey, http://eligrey.com
*
* License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
* source  : http://purl.eligrey.com/github/FileSaver.js
*/

// The one and only way of getting global scope in all environments
// https://stackoverflow.com/q/3277182/1008999
var _global = typeof window === 'object' && window.window === window
  ? window : typeof self === 'object' && self.self === self
  ? self : typeof global === 'object' && global.global === global
  ? global
  : this

function bom (blob, opts) {
  if (typeof opts === 'undefined') opts = { autoBom: false }
  else if (typeof opts !== 'object') {
    console.warn('Deprecated: Expected third argument to be a object')
    opts = { autoBom: !opts }
  }

  // prepend BOM for UTF-8 XML and text/* types (including HTML)
  // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
  if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
    return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
  }
  return blob
}

function download (url, name, opts) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    saveAs(xhr.response, name, opts)
  }
  xhr.onerror = function () {
    console.error('could not download file')
  }
  xhr.send()
}

function corsEnabled (url) {
  var xhr = new XMLHttpRequest()
  // use sync to avoid popup blocker
  xhr.open('HEAD', url, false)
  try {
    xhr.send()
  } catch (e) {}
  return xhr.status >= 200 && xhr.status <= 299
}

// `a.click()` doesn't work for all browsers (#465)
function click (node) {
  try {
    node.dispatchEvent(new MouseEvent('click'))
  } catch (e) {
    var evt = document.createEvent('MouseEvents')
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
                          20, false, false, false, false, 0, null)
    node.dispatchEvent(evt)
  }
}

var saveAs = _global.saveAs || (
  // probably in some web worker
  (typeof window !== 'object' || window !== _global)
    ? function saveAs () { /* noop */ }

  // Use download attribute first if possible (#193 Lumia mobile)
  : 'download' in HTMLAnchorElement.prototype
  ? function saveAs (blob, name, opts) {
    var URL = _global.URL || _global.webkitURL
    var a = document.createElement('a')
    name = name || blob.name || 'download'

    a.download = name
    a.rel = 'noopener' // tabnabbing

    // TODO: detect chrome extensions & packaged apps
    // a.target = '_blank'

    if (typeof blob === 'string') {
      // Support regular links
      a.href = blob
      if (a.origin !== location.origin) {
        corsEnabled(a.href)
          ? download(blob, name, opts)
          : click(a, a.target = '_blank')
      } else {
        click(a)
      }
    } else {
      // Support blobs
      a.href = URL.createObjectURL(blob)
      setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s
      setTimeout(function () { click(a) }, 0)
    }
  }

  // Use msSaveOrOpenBlob as a second approach
  : 'msSaveOrOpenBlob' in navigator
  ? function saveAs (blob, name, opts) {
    name = name || blob.name || 'download'

    if (typeof blob === 'string') {
      if (corsEnabled(blob)) {
        download(blob, name, opts)
      } else {
        var a = document.createElement('a')
        a.href = blob
        a.target = '_blank'
        setTimeout(function () { click(a) })
      }
    } else {
      navigator.msSaveOrOpenBlob(bom(blob, opts), name)
    }
  }

  // Fallback to using FileReader and a popup
  : function saveAs (blob, name, opts, popup) {
    // Open a popup immediately do go around popup blocker
    // Mostly only available on user interaction and the fileReader is async so...
    popup = popup || open('', '_blank')
    if (popup) {
      popup.document.title =
      popup.document.body.innerText = 'downloading...'
    }

    if (typeof blob === 'string') return download(blob, name, opts)

    var force = blob.type === 'application/octet-stream'
    var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
    var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)

    if ((isChromeIOS || (force && isSafari)) && typeof FileReader === 'object') {
      // Safari doesn't allow downloading of blob URLs
      var reader = new FileReader()
      reader.onloadend = function () {
        var url = reader.result
        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
        if (popup) popup.location.href = url
        else location = url
        popup = null // reverse-tabnabbing #460
      }
      reader.readAsDataURL(blob)
    } else {
      var URL = _global.URL || _global.webkitURL
      var url = URL.createObjectURL(blob)
      if (popup) popup.location = url
      else location.href = url
      popup = null // reverse-tabnabbing #460
      setTimeout(function () { URL.revokeObjectURL(url) }, 4E4) // 40s
    }
  }
)

_global.saveAs = saveAs.saveAs = saveAs

if (typeof module !== 'undefined') {
  module.exports = saveAs;
}
javascript excel export
  • 2

    and the code of Function saveAs?

1 answer

1


You have 2 problems with your code:

  1. document.getElementById('conteudo').innerText

The .innerText will send the content in plain text to the element, that is, the HTML tags will be printed in text and not interpreted as tags by the browser. In addition to the code in the function ExportarExl() will not find the id #tblExport. The right thing to do is to use .innerHTML, in this way: document.getElementById('conteudo').innerHTML.

  1. In function ExportarExl(), the variable texto has the same problem using .innerText, when you should use .outerHTML to take the div and the complete table (not just the internal content), i.e.: var texto = document.getElementById('tblExport').outerHTML;

Test example:

/*
* FileSaver.js
* A saveAs() FileSaver implementation.
*
* By Eli Grey, http://eligrey.com
*
* License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
* source  : http://purl.eligrey.com/github/FileSaver.js
*/

// The one and only way of getting global scope in all environments
// https://stackoverflow.com/q/3277182/1008999
var _global = typeof window === 'object' && window.window === window
  ? window : typeof self === 'object' && self.self === self
  ? self : typeof global === 'object' && global.global === global
  ? global
  : this

function bom (blob, opts) {
  if (typeof opts === 'undefined') opts = { autoBom: false }
  else if (typeof opts !== 'object') {
    console.warn('Deprecated: Expected third argument to be a object')
    opts = { autoBom: !opts }
  }

  // prepend BOM for UTF-8 XML and text/* types (including HTML)
  // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
  if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
    return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
  }
  return blob
}

function download (url, name, opts) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    saveAs(xhr.response, name, opts)
  }
  xhr.onerror = function () {
    console.error('could not download file')
  }
  xhr.send()
}

function corsEnabled (url) {
  var xhr = new XMLHttpRequest()
  // use sync to avoid popup blocker
  xhr.open('HEAD', url, false)
  try {
    xhr.send()
  } catch (e) {}
  return xhr.status >= 200 && xhr.status <= 299
}

// `a.click()` doesn't work for all browsers (#465)
function click (node) {
  try {
    node.dispatchEvent(new MouseEvent('click'))
  } catch (e) {
    var evt = document.createEvent('MouseEvents')
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
                          20, false, false, false, false, 0, null)
    node.dispatchEvent(evt)
  }
}

var saveAs = _global.saveAs || (
  // probably in some web worker
  (typeof window !== 'object' || window !== _global)
    ? function saveAs () { /* noop */ }

  // Use download attribute first if possible (#193 Lumia mobile)
  : 'download' in HTMLAnchorElement.prototype
  ? function saveAs (blob, name, opts) {
    var URL = _global.URL || _global.webkitURL
    var a = document.createElement('a')
    name = name || blob.name || 'download'

    a.download = name
    a.rel = 'noopener' // tabnabbing

    // TODO: detect chrome extensions & packaged apps
    // a.target = '_blank'

    if (typeof blob === 'string') {
      // Support regular links
      a.href = blob
      if (a.origin !== location.origin) {
        corsEnabled(a.href)
          ? download(blob, name, opts)
          : click(a, a.target = '_blank')
      } else {
        click(a)
      }
    } else {
      // Support blobs
      a.href = URL.createObjectURL(blob)
      setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s
      setTimeout(function () { click(a) }, 0)
    }
  }

  // Use msSaveOrOpenBlob as a second approach
  : 'msSaveOrOpenBlob' in navigator
  ? function saveAs (blob, name, opts) {
    name = name || blob.name || 'download'

    if (typeof blob === 'string') {
      if (corsEnabled(blob)) {
        download(blob, name, opts)
      } else {
        var a = document.createElement('a')
        a.href = blob
        a.target = '_blank'
        setTimeout(function () { click(a) })
      }
    } else {
      navigator.msSaveOrOpenBlob(bom(blob, opts), name)
    }
  }

  // Fallback to using FileReader and a popup
  : function saveAs (blob, name, opts, popup) {
    // Open a popup immediately do go around popup blocker
    // Mostly only available on user interaction and the fileReader is async so...
    popup = popup || open('', '_blank')
    if (popup) {
      popup.document.title =
      popup.document.body.innerText = 'downloading...'
    }

    if (typeof blob === 'string') return download(blob, name, opts)

    var force = blob.type === 'application/octet-stream'
    var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
    var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)

    if ((isChromeIOS || (force && isSafari)) && typeof FileReader === 'object') {
      // Safari doesn't allow downloading of blob URLs
      var reader = new FileReader()
      reader.onloadend = function () {
        var url = reader.result
        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
        if (popup) popup.location.href = url
        else location = url
        popup = null // reverse-tabnabbing #460
      }
      reader.readAsDataURL(blob)
    } else {
      var URL = _global.URL || _global.webkitURL
      var url = URL.createObjectURL(blob)
      if (popup) popup.location = url
      else location.href = url
      popup = null // reverse-tabnabbing #460
      setTimeout(function () { URL.revokeObjectURL(url) }, 4E4) // 40s
    }
  }
)

_global.saveAs = saveAs.saveAs = saveAs

if (typeof module !== 'undefined') {
  module.exports = saveAs;
}
function M(){
    var nProcesso = "123";
    var Autor = "autor";
    var Reu = "reu";
    var Data = "07/07/2014";
    var Especie = "esp";
    var Vara = "segunda";




    document.getElementById('conteudo').innerHTML = "<table class='table' id='tblExport'>" + 
"<thead>" +
 "<tr>" +
    "<th>N° Processo</th>" +
    "<th>Autor</th>" +
    "<th>Reu</th>" +
    "<th>Data</th>" +
    "<th>Especie</th>" +
    "<th>Vara</th>" +
  "</tr>" +
"</thead>" +
"<tbody>" +
    "<tr>" +
    "<td>" + nProcesso + "</td>" +
    "<td>" + Autor + "</td>" +
    "<td>" + Reu + "</td>" +
    "<td>" + Data + "</td>" +
    "<td>" + Especie + "</td>" +
    "<td>" + Vara + "</td>" +
    "</tr>" 
+ "</tbody>" +  "</table>";

}
function ExportarExl() {
  let data = new Date().toISOString().slice(0,10);
  var texto = document.getElementById('tblExport').outerHTML;
  let titulo = "tit";
  var blob = new Blob([texto], { type: "text/plain;charset=utf-8" });
  saveAs(blob, titulo + " " + data + ".xls");
}
<div id="conteudo"></div>
<button onClick="M()">Gerar tabela (clique aqui primeiro)</button>
<button onClick="ExportarExl()">Exportar Excel</button>

  • The contents of the exported file are plain html text: (it makes no difference innerHtml or innerText). <table class="table" id="tblExport"><thead><tr><th>N° Process</th><th>Author</th><th>Reu</th><th>Data</th><th>>

  • Sam, thank you so much, it worked out here...I’m picking up on js, I don’t know many things, but thanks for helping me out

  • @You are welcome. If you can schedule the answer with the community, thank ;)

  • @Elizeu there is a lot of difference between innerText and innerHTML. As I said, the first returns pure text, including tags. Thus the code document.getElementById('tblExport') will not find the element with the id #tblExport because it will not exist as an element.

  • @What does it have to do with the time of the answer and the time of the question? I did not understand its statement.

  • @Elizeu If you have a better answer, you have the freedom and the right to post. You will earn up to +1 mine if it is good (it doesn’t have to be better or worse than mine).

  • @Sam, how do I get him to go adding on the bass line, every time I fill out the form?

  • @Sam, how do I get him to go adding on the bass line, every time I fill out the form?

  • @Guyana You have to add only rows in the table, not the entire table. Place the table structure with empty tbody in HTML and add only lines, as shown here: https://jsfiddle.net/b2x3ksqt/

  • 1

    @Sam, Voce is top, congratulations. you are 10

  • @Sam, I’m having a problem with another script... you can help me?

  • @Guyana if it’s within my power.

  • @Sam, I’m with script that copy button and save button, on localhost now works on hosting not. follow the link http://servicequalityscript.000webhostapp.com/

  • Open the code there and take a look

  • @Sam, the Save button I get using the library you passed me, the copy button that is not working servicequalityscript.000webhostapp.com

Show 10 more comments

Browser other questions tagged javascript excel export

You are not signed in. Login or sign up in order to post.