Encoding UTF-8 when exporting HTML table to Excel

前端 未结 5 941
感动是毒
感动是毒 2020-12-01 09:39

I am trying to export an HTML table to Excel using javascript. This is the javascript code



        
相关标签:
5条回答
  • 2020-12-01 10:16

    First: Your header is malformed. It should be:

    <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
    

    And second: It should be into your template, because it contains charset information for Excel.

    <script type="text/javascript">
        var tableToExcel = (function() {
              var uri = 'data:application/vnd.ms-excel;base64,'
                , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; 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]; }) }
              return function(table, name) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                window.location.href = uri + base64(format(template, ctx))
              }
            })()
    </script> 
    
    0 讨论(0)
  • 2020-12-01 10:18

    if you want to change default file name according to @Axel Richter's answer, try this:

    var link = document.createElement('a');
    link.download = 'filename.xls';
    ...
    link.href = uri + base64(format(template, ctx));
    link.click();
    ...
    

    replace window.location.href with link.href

    0 讨论(0)
  • 2020-12-01 10:34

    I will cite again a respect that was indicated above. You need to include the meta tag code inside the head tag:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <!--This is what you should include-->
    <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
    <!---->
    <title>Ver Listado Pago</title>
    <link href="/Images/Decretos.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <link href="/Content/site.css" rel="stylesheet" />
    <link href="~/Content/booostrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/booostrap/bootstrap-theme.css" rel="stylesheet" />
    <link href="~/Content/booostrap/bootstrap-theme.min.css" rel="stylesheet" />
    

    This has worked for me. But IE and WIN10 have some conflicts for download because of the xls extension. However, the problem of special characters is corrected

    0 讨论(0)
  • 2020-12-01 10:36

    Use the code below in the var uri:

    var uri = 'data:application/vnd.ms-excel;charset=UTF-8;base64,'
    

    Output

    0 讨论(0)
  • 2020-12-01 10:37
    function exportData(report_id){
        var blob = new Blob([document.getElementById(report_id).innerHTML], {
            type: "text/plain;charset=utf-8;"
        });
        saveAs(blob, "Report.xls");
    }
    

    Takes table data as plain text and save as Excel without encoding problem

    0 讨论(0)
提交回复
热议问题