Print and export excel/word from html field

Home Forums Quform WordPress Print and export excel/word from html field

This topic is: resolved
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #32796

    I need help for this.
    First of all I explain what I am doing:
    a) I have a form that after a dropdown field change make a php call through ajax,
    b) Then the php return the information to a html field I already created,
    c) The result is presented like a html table
    d) I already print the result without the css style
    Until this point everything is fine

    What I want to do is
    e) Print the result keeping the css style – I already had create a css style in the plugins area
    f) Export to excel and word the result
    Thanks in advance,

    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.


    I make it work in this way
    1) Due to I make a query through ajax to php, I receive the data in a html format string
    2) The returned data include a div called “tabla_resultado”
    3) In the form I include an html file whith this code:

    <button class=”btn-default” type=”button” onclick=”printDiv(‘areaImprimir’);”>Imprimir</button>
    <button class=”btn-default” type=”button” onclick=”descargarExcel(‘areaImprimir’);”>Excel</button>
    <button class=”btn-default” type=”button” onclick=”descargarWord(‘areaImprimir’);”>Word</button>
    <button class=”btn-default” type=”button” onclick=”location.reload();”>Cambiar parámetros</button>

    <section id=”tabla_resultado” href=”#”></section>

    4) Finally I include this code in the js file
    function descargarWord(nombreDiv){ // <!– aqui exporto a Word!! –>
    var header = “<html xmlns:o=’urn:schemas-microsoft-com:office:office’ “+
    “xmlns:w=’urn:schemas-microsoft-com:office:word’ “+
    “<head><meta charset=’utf-8′><title>Export HTML to Word Document with JavaScript</title></head><body>”;
    var footer = “</body></html>”;
    var sourceHTML = header+document.getElementById(nombreDiv).innerHTML+footer;

    var source = ‘data:application/;charset=utf-8,’ + encodeURIComponent(sourceHTML);
    var fileDownload = document.createElement(“a”);
    fileDownload.href = source; = ‘descargaPilas.doc’;;

    function descargarExcel(nombreDiv){ //– aqui exporto a Excel!!
    var uri = ‘data:application/;base64,’
    , template = ‘<html xmlns:o=”urn:schemas-microsoft-com:office:office” xmlns:x=”urn:schemas-microsoft-com:office:excel” xmlns=”″><meta http-equiv=”content-type” content=”application/; charset=UTF-8″><head><!–[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]–></head><body><table>{table}</table></body></html>’
    , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

    var table = ‘areaImprimir’;
    var nombre = ‘DescargaPilas.xls’;

    if (!table.nodeType) table = document.getElementById(table)
    //var ctx = { worksheet: name || ‘Worksheet’, table: table.innerHTML }
    var ctx = { worksheet: nombre || ‘Worksheet’, table: table.innerHTML }
    window.location.href = uri + base64(format(template, ctx))

    // Aqui imprimo mediante javascript, uso la imagen de la impresora que está en el header
    function printDiv(nombreDiv) {
    var contenido= document.getElementById(nombreDiv).innerHTML;
    var contenidoOriginal= document.body.innerHTML;
    document.body.innerHTML = contenido;
    document.body.innerHTML = contenidoOriginal;

    Hope this can be useful

    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy