如何将excel 转换为html

Posted 2023-04-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将excel 转换为html相关的知识，希望对你有一定的参考价值。

另存为：

参考技术A 1、点击菜单栏-文件-另存为网页
2、输入导出文件名称，点击保存。
3、双击打开html文件，即会调出IE浏览器打开页面。参考技术B

直接另存为就可以了

参考技术C 选择文件 > 另存为 > 在文件类型中选择网页文件（*.htm; *.html） > 再输入保存的网页文件名称既可。

如何将html表格转换为具有多个工作表的excel？

【中文标题】如何将html表格转换为具有多个工作表的excel？【英文标题】：How to convert html table to excel with multiple sheet? 【发布时间】：2015-06-24 06:44:27 【问题描述】：

如何将多个 html 表格转换为具有多个工作表的 excel 工作表？你能帮忙解决这个问题吗？

我的例子https://jsfiddle.net/kdkd/5p22gdag/

        function tablesToExcel() 
        

            var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
            var textRange; var j = 0;
            tab = document.getElementById('tbl2'); // id of table


            for (j = 0 ; j < tab.rows.length ; j++) 
                tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
                //tab_text=tab_text+"</tr>";
            

            tab_text = tab_text + "</table>";
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");

            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
            
                txtArea1.document.open("txt/html", "replace");
                txtArea1.document.write(tab_text);
                txtArea1.document.close();
                txtArea1.focus();
                sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
            
            else                 //other browser not tested on IE 11
                sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));


            return (sa);

【问题讨论】：

您是否检查过这些问题：***.com/questions/24636956/… 和 ***.com/questions/18234448/…？他们似乎对此有解决方案谢谢。我已经检查了上面给出的链接。一个小问题是所有 HTML 表格都插入到一个工作表中。（成功创建了多个工作表）但是，这是您想要的示例..jsfiddle.net/qxLn3h86 我已经尝试过了，但我的表格有内联 CSS，所以它不起作用。请检查这个小提琴jsfiddle.net/kdkd/qxLn3h86/49 等待解决..请帮助 【参考方案1】：

我刚刚发布此内容是为了提供一个使用 css 导出多个工作表的更多选项。 Working Fiddle

我打了更多天，找到了这种方法。希望这对其他人有帮助。

$('button').click(function() 
tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')

);  
  
  var tablesToExcel = (function() 
    var uri = 'data:application/vnd.ms-excel;base64,'
    , tmplWorkbookXML = '<?xml version="1.0" encoding="windows-1252"?><?mso-application progid="Excel.Sheet"?>'
      + '   <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"  xmlns:html="http://www.w3.org/TR/REC-html40">'
    + '     <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">'
      + '           <Author>Qompare</Author>'
      + '           <Created>created</Created>'
      + '       </DocumentProperties>'
    + '     <Styles>'
      + '           <Style ss:ID="Default" ss:Name="Normal">'
      + '               <NumberFormat ss:Format=""/>'
      + '           </Style>'
      + '           <Style ss:ID="Header">'
      + '               <Alignment ss:Vertical="Bottom"/>'
    + '             <Borders>'
      + '                   <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Right"/>'
      + '                   <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Left"/>'
      + '                   <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Top"/>'
      + '                   <Border ss:Color="#000000" ss:Weight="2" ss:LineStyle="Continuous" ss:Position="Bottom"/>'
    + '             </Borders>'
      + '               <Font ss:FontName="Calibri" ss:Size="12" ss:Color="#000000"/>'
      + '               <Interior ss:Color="#cccccc" ss:Pattern="Solid" />'
      + '               <NumberFormat/>'
      + '               <Protection/>'
      + '           </Style>'
    + '         <Style ss:ID="Changed">'
      + '               <Borders/>'
      + '               <Font ss:Color="#ff0000"></Font>'
      + '               <Interior ss:Color="#99CC00" ss:Pattern="Solid"></Interior>'
      + '               <NumberFormat/>'
      + '               <Protection/>'
      + '           </Style>'
    + '         <Style ss:ID="Missed">'
      + '               <Borders/>'
      + '               <Font ss:Color="#ff0000"></Font>'
      + '               <Interior ss:Color="#ff0000" ss:Pattern="Solid"></Interior>'
      + '               <NumberFormat/>'
      + '               <Protection/>'
      + '           </Style>'
    + '         <Style ss:ID="Decimals">'
      + '               <NumberFormat ss:Format="Fixed"/>'
      + '           </Style>'    
    + ' </Styles>' 
    + ' worksheets'
      + '</Workbook>'
    , tmplWorksheetXML = '<Worksheet ss:Name="nameWS">'
      + '   <ss:Table>'
      + '       rows'
      + '   </ss:Table>'
      + '</Worksheet>'
    , tmplCellXML = '           <ss:CellattributeStyleIDattributeFormula>'
      + '               <ss:Data ss:Type="nameType">data</ss:Data>'
      + '           </ss:Cell>'
    , 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(tables, wsnames, wbname, appname) 
      var ctx = "";
      var workbookXML = "";
      var worksheetsXML = "";
      var rowsXML = "";

      for (var i = 0; i < tables.length; i++) 
        if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
        for (var j = 0; j < tables[i].rows.length; j++) 
          rowsXML += '      <ss:Row>'
          for (var k = 0; k < tables[i].rows[j].cells.length; k++) 
            var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
            var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
            var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
            dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
            if(!isNaN(dataValue))
                    dataType = 'Number';
                    dataValue = parseFloat(dataValue);
            
            var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
            dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
            ctx =   attributeStyleID: (dataStyle=='Changed' || dataStyle=='Missed'|| dataStyle=='Header')?' ss:StyleID="'+dataStyle+'"':''
                   , nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
                   , data: (dataFormula)?'':dataValue
                   , attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
                  ;
            rowsXML += format(tmplCellXML, ctx);
          
          rowsXML += '      </ss:Row>'
        
        ctx = rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i;
        worksheetsXML += format(tmplWorksheetXML, ctx);
        rowsXML = "";
      

      ctx = created: (new Date()).getTime(), worksheets: worksheetsXML;
      workbookXML = format(tmplWorkbookXML, ctx);
      var link = document.createElement("A");
      link.href = uri + base64(workbookXML);
      link.download = wbname || 'Workbook.xls';
      link.target = '_blank';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    
  )();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <!--<button  onclick="tablesToExcel( [ 'sheet': 'firstsheet','tables' : ['tbl1','tbl2'], 'sheet': 'secondsheet','tables' : ['tbl5']], 'TestBook.xls', 'Excel')">Export to Excel</button> -->
 <!-- button  onclick="">Export to Excel</button> -->
  <button  >Export to Excel</button>
 
<table id="tbl1" class="table2excel">
     <thead>
                    <tr>
                     
                        <th data-style="Header">Product</th>
                        <th data-style="Header">Price</th>
                        <th data-style="Header">Available</th>
                        <th data-style="Header">Count</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td data-style="Changed">Bred</td>
                        <td data-style="Missed">1
</td>
                        <td>037.57834600204239857
</td>
                        <td data-style="Header">3
</td>
                    </tr>
                    <tr>
                        <td>Butter</td>
                        <td>4
</td>
                        <td>5
</td>
                        <td >6
</td>
                    </tr>
                    </tbody>
                </table>
<hr>
  
  <table id="tbl2" class="table2excel">
  <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                        <th>Available</th>
                        <th>Count</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Bred</td>
                        <td>7.5
</td>
                        <td>8
</td>
                        <td>9
</td>
                    </tr>
                    <tr>
                        <td>Butter</td>
                        <td>14
</td>
                        <td>15
</td>
                        <td >16
</td>
                    </tr>
                    </tbody>
                </table>

<table id="joined" class="table2excel">
  <thead>
    <tr></tr>
    </thead>
      <tbody>
      </tbody>
</table>

【讨论】：

【参考方案2】：

@Butani Vijay

我发现您的代码存在一个问题。尽管您可能会争辩说，也许我的源表不完全符合 HTML。具体来说，我的表的定义类似于

    <table id="tbl1">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>E-Mail</th>
                                            <th>Last<br>Login</th>
                                            <th>Suspended</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                            <tr>
                                                <td><a target="_new" href="https://xxxxx.zendesk.com/agent/users/378955944453">Joe User</a></td>
                                                <td>JUser@xyz.edu</td>
                                                <td>2020-02-18T16:42:50Z</td>
                                                <td>false</td>
                                            </tr>
                                        <tfoot>
                                                <tr>
                                                    <td><b>Totals: </b></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                        </tfoot>
                                    </tbody>

    </table>

并且由于<th>Last<br>Login</th> 中包含<br>，XML 解析表明它需要</br>。但为什么？？？ HTML 并没有真正的</br> 因此，虽然 XLS 会打开，但电子表格中没有数据，也没有定义任何工作表

但是一个合适的解决方法是改变你的 javascript

dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;

到

dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerText;

【讨论】：

你不能在你的答案中解决另一个答案。如果您在现有答案中发现问题，您应该发布自己的完整答案。【参考方案3】：

对多张工作表使用下面的代码。我正在使用三个表格数据来生成 Excel。导入库：

从“xlsx”导入*为XLSX；

static doExcel1(tableId1, tableId2, tableId3) 

    let targetTableElm1 = document.getElementById(tableId1);
    let targetTableElm2 = document.getElementById(tableId2);
    let targetTableElm3 = document.getElementById(tableId3);

    const wb =  SheetNames: [], Sheets:  ;
    var ws1 = XLSX.utils.table_to_book(targetTableElm1).Sheets.Sheet1;
    wb.SheetNames.push("Sheet1"); wb.Sheets["Sheet1"] = ws1;

    var ws2 = XLSX.utils.table_to_book(targetTableElm2).Sheets.Sheet1;
    wb.SheetNames.push("Sheet2"); wb.Sheets["Sheet2"] = ws2;

    var ws3 = XLSX.utils.table_to_book(targetTableElm3).Sheets.Sheet1;
    wb.SheetNames.push("Sheet3"); wb.Sheets["Sheet3"] = ws3;
    console.log(ws1); console.log(ws2); console.log(ws3); console.log(wb);
    const blob = new Blob([this.s2ab(XLSX.write(wb,  bookType: 'xlsx', type: 'binary' ))], 
      type: "application/octet-stream"
    );
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'demo.xlsx';

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
  
  static s2ab(s) 
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;

使用表 ID 调用：doExcel1("ExampleTable1","ExampleTable2","ExampleTable3");点击按钮。

注意：以上解决方案仅适用于 Angular，如果您想在节点或 js 中使用它，则需要进行一些更改。

【讨论】：

【参考方案4】：

在互联网上没有找到任何东西来解决这个问题，所以我创建了自己的。这是一个创建 2 个或更多工作表（每个表 1 个工作表）并且工作正常的工作示例。享受！ :)

Run the example in https://jsfiddle.net/xvkt0yw9/

这是对 XLS 导出（网页）的 .mht 表示的~逆向工程。工作表名称在每个表的 data-SheetName 属性中定义。该函数可以很容易地转换为其他编程语言。（基本上全是replace mes）

还为单元格编号格式提供内联样式（作为文本、常规、2 位小数）

注意：无论您是否设置选项，单元格网格都会显示... 警告不要缩进 javascript 函数。（我不知道如果你这样做，XLS 会发生什么，没有测试，没有必要） Html：（将以下内容放入 test.html 文件中并在浏览器中运行。单击按钮并打开导出的 Worksheet.xls）

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
var tablesToExcel = (function ($) 
    var uri = 'data:application/vnd.ms-excel;base64,'
    , html_start = `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">`
    , template_ExcelWorksheet = `<x:ExcelWorksheet><x:Name>SheetName</x:Name><x:WorksheetSource HRef="sheetSheetIndex.htm"/></x:ExcelWorksheet>`
    , template_ListWorksheet = `<o:File HRef="sheetSheetIndex.htm"/>`
    , template_HTMLWorksheet = `
------=_NextPart_dummy
Content-Location: sheetSheetIndex.htm
Content-Type: text/html; charset=windows-1252

` + html_start + `
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link id="Main-File" rel="Main-File" href="../WorkBook.htm">
    <link rel="File-List" href="filelist.xml">
</head>
<body><table>SheetContent</table></body>
</html>`
    , template_WorkBook = `MIME-Version: 1.0
X-Document-Type: Workbook
Content-Type: multipart/related; boundary="----=_NextPart_dummy"

------=_NextPart_dummy
Content-Location: WorkBook.htm
Content-Type: text/html; charset=windows-1252

` + html_start + `
<head>
<meta name="Excel Workbook Frameset">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="filelist.xml">
<!--[if gte mso 9]><xml>
 <x:ExcelWorkbook>
    <x:ExcelWorksheets>ExcelWorksheets</x:ExcelWorksheets>
    <x:ActiveSheet>0</x:ActiveSheet>
 </x:ExcelWorkbook>
</xml><![endif]-->
</head>
<frameset>
    <frame src="sheet0.htm" name="frSheet">
    <noframes><body><p>This page uses frames, but your browser does not support them.</p></body></noframes>
</frameset>
</html>
HTMLWorksheets
Content-Location: filelist.xml
Content-Type: text/xml; charset="utf-8"

<xml xmlns:o="urn:schemas-microsoft-com:office:office">
    <o:MainFile HRef="../WorkBook.htm"/>
    ListWorksheets
    <o:File HRef="filelist.xml"/>
</xml>
------=_NextPart_dummy--
`
    , 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 (tables, filename) 
        var context_WorkBook = 
            ExcelWorksheets:''
        ,   HTMLWorksheets: ''
        ,   ListWorksheets: ''
        ;
        var tables = jQuery(tables);
        $.each(tables,function(SheetIndex)
            var $table = $(this);
            var SheetName = $table.attr('data-SheetName');
            if($.trim(SheetName) === '')
                SheetName = 'Sheet' + SheetIndex;
            
            context_WorkBook.ExcelWorksheets += format(template_ExcelWorksheet, 
                SheetIndex: SheetIndex
            ,   SheetName: SheetName
            );
            context_WorkBook.HTMLWorksheets += format(template_HTMLWorksheet, 
                SheetIndex: SheetIndex
            ,   SheetContent: $table.html()
            );
            context_WorkBook.ListWorksheets += format(template_ListWorksheet, 
                SheetIndex: SheetIndex
            );
        );

        var link = document.createElement("A");
        link.href = uri + base64(format(template_WorkBook, context_WorkBook));
        link.download = filename || 'Workbook.xls';
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    
)(jQuery);
</script>
</head>
<body>
    <button onclick="tablesToExcel('#table_1,#table_2', 'WorkSheet.xls');">HTML Tables to XLS sheets</button>
    <table id="table_1" data-SheetName="My custom sheet 1">
        <thead>
            <tr >
                <td colspan="4" style="border-color:#fff;">
                    Left info
                </td>
                <td colspan="3" class="text-right" style="border-color:#fff;">
                    Right info
                </td>
            </tr>
            <tr>
                <th colspan="7" style="border-color:#fff;text-decoration:underline;font-size:2em;" class="text-center">
                    Title
                </th>
            </tr>
            <tr>
                <th colspan="7" style="border-left-color:#fff; border-right-color:#fff;border-top-color:#fff;text-decoration:underline;font-size:1.5em;" class="text-center">
                    Subtitle
                </th>
            </tr>
            <tr>
                <th colspan="7" style="border-left-color:#fff;border-right-color:#fff;border-top-color:#fff;height:50px;">
                    Spacer
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="mso-number-format:'\@'">1</td>
                <td style="mso-number-format:'General'">2</td>
                <td style="mso-number-format:'0\.00'">3</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tbody>
    </table>
    <table id="table_2" data-SheetName="My custom worksheet 2">
        <thead>
            <tr >
                <td colspan="2" style="border-color:#fff;">
                    Left info 2
                </td>
                <td colspan="2" class="text-right" style="border-color:#fff;">
                    Right info 2
                </td>
            </tr>
            <tr>
                <th colspan="4" style="border-color:#fff;text-decoration:underline;font-size:2em;" class="text-center">
                    Title 2
                </th>
            </tr>
            <tr>
                <th colspan="4" style="border-left-color:#fff; border-right-color:#fff;border-top-color:#fff;text-decoration:underline;font-size:1.5em;" class="text-center">
                    Subtitle 2
                </th>
            </tr>
            <tr>
                <th colspan="4" style="border-left-color:#fff;border-right-color:#fff;border-top-color:#fff;height:50px;">
                    Spacer 2
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="mso-number-format:'\@'">3</td>
                <td style="mso-number-format:'General'">4</td>
                <td style="mso-number-format:'0\.00'">5</td>
                <td>info2</td>
                <td>info3</td>
                <td>info4</td>
                <td>info5</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

【讨论】：

【参考方案5】：

Bhutani Vijay 的代码运行良好。为了兼容 IE 11，我使用了 Blob 对象，如下所示：

var tablesToExcel = (function() 
  var uri = 'data:application/vnd.ms-excel;base64,',
    tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' +
    '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>created</Created></DocumentProperties>' +
    '<Styles>' +
    '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' +
    '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' +
    '</Styles>' +
    'worksheets</Workbook>',
    tmplWorksheetXML = '<Worksheet ss:Name="nameWS"><Table>rows</Table></Worksheet>',
    tmplCellXML = '<CellattributeStyleIDattributeFormula><Data ss:Type="nameType">data</Data></Cell>',
    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(tables, wsnames, wbname, appname) 
    var ctx = "";
    var workbookXML = "";
    var worksheetsXML = "";
    var rowsXML = "";

    for (var i = 0; i < tables.length; i++) 
      if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
      for (var j = 0; j < tables[i].rows.length; j++) 
        rowsXML += '<Row>'
        for (var k = 0; k < tables[i].rows[j].cells.length; k++) 
          var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
          var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
          var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
          dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
          var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
          dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null;
          ctx = 
            attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : '',
            nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String',
            data: (dataFormula) ? '' : dataValue,
            attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
          ;
          rowsXML += format(tmplCellXML, ctx);
        
        rowsXML += '</Row>'
      
      ctx = 
        rows: rowsXML,
        nameWS: wsnames[i] || 'Sheet' + i
      ;
      worksheetsXML += format(tmplWorksheetXML, ctx);
      rowsXML = "";
    

    ctx = 
      created: (new Date()).getTime(),
      worksheets: worksheetsXML
    ;
    workbookXML = format(tmplWorkbookXML, ctx);

    var link = document.createElement("A");
    
    // IE 11
    if (window.navigator.msSaveBlob) 
      var blob = new Blob([workbookXML], 
        type: "application/csv;charset=utf-8;"
      );
      navigator.msSaveBlob(blob, 'test.xls');
    
    // Chrome and other browsers
    else 
      link.href = uri + base64(workbookXML);
    

    link.download = wbname || 'Workbook.xls';
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  
)();

【讨论】：

【参考方案6】：

Here 是一个更好的解决方案，它支持以最新的 Excel 格式导出表格，即 xlsx .如果在 Chrome 上导出的总行数超过 3407，则可接受的解决方案将失败。

上面链接中的一个例子： http://jsfiddle.net/6ckj281f/

html

<button onclick="saveFile()">Save XLSX file</button>

javascript

window.saveFile = function saveFile () 
var data1 = [a:1,b:10,a:2,b:20];
var data2 = [a:100,b:10,a:200,b:20];
var opts = [sheetid:'One',header:true,sheetid:'Two',header:false];
var res = alasql('SELECT INTO XLSX("restest344b.xlsx",?) FROM ?',
                 [opts,[data1,data2]]);

【讨论】：

哦，这正是我想要的。谢谢！【参考方案7】：

function tablesToExcel() 
        

            var tab_text = document.getElementById("MsoNormalTable").outerHTML;
            var textRange; var j = 0;
            var tab = document.getElementById('MsoNormalTable'); // id of table
            var sa;

            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");
            var txt = document.getElementById('txtArea1').contentWindow;
            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
            
                txt.document.open("txt/html", "replace");
                txt.document.write(tab_text);
                txt.document.close();
                txt.focus();
                sa = txt.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
            
            else                 //other browser not tested on IE 11
                sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));

            return (sa);
        
 

<iframe id="txtArea1" style="display:none"></iframe>

它可以在 IE7+ 上正常工作... :)

【讨论】：

【参考方案8】：

你可以这样做：Here is Full Example

HTML：

<table id="tbl1" class="table2excel">
        <tr>
            <td>Product</td>
            <td>Price</td>
            <td>Available</td>
            <td>Count</td>
        </tr>
        <tr>
            <td>Bred</td>
            <td>1</td>
            <td>2</td>
             <td>3</td>
        </tr>
        <tr>
            <td>Butter</td>
            <td>4   </td>
            <td>5   </td>
            <td >6  </td>
        </tr>
  </table>
<hr>

  <table id="tbl2" class="table2excel">
        <tr>
            <td>Product</td>
            <td>Price</td>
            <td>Available</td>
            <td>Count</td>
        </tr>
        <tr>
            <td>Bred</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Butter</td>
            <td>14</td>
            <td>15</td>
            <td >16</td>
        </tr>
    </table>


<button  onclick="tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')">Export to Excel</button>

Javascript：

 var tablesToExcel = (function() 
    var uri = 'data:application/vnd.ms-excel;base64,'
    , tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
      + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>created</Created></DocumentProperties>'
      + '<Styles>'
      + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
      + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
      + '</Styles>' 
      + 'worksheets</Workbook>'
    , tmplWorksheetXML = '<Worksheet ss:Name="nameWS"><Table>rows</Table></Worksheet>'
    , tmplCellXML = '<CellattributeStyleIDattributeFormula><Data ss:Type="nameType">data</Data></Cell>'
    , 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(tables, wsnames, wbname, appname) 
      var ctx = "";
      var workbookXML = "";
      var worksheetsXML = "";
      var rowsXML = "";

      for (var i = 0; i < tables.length; i++) 
        if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
        for (var j = 0; j < tables[i].rows.length; j++) 
          rowsXML += '<Row>'
          for (var k = 0; k < tables[i].rows[j].cells.length; k++) 
            var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
            var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
            var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
            dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
            var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
            dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
            ctx =   attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
                   , nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
                   , data: (dataFormula)?'':dataValue
                   , attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
                  ;
            rowsXML += format(tmplCellXML, ctx);
          
          rowsXML += '</Row>'
        
        ctx = rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i;
        worksheetsXML += format(tmplWorksheetXML, ctx);
        rowsXML = "";
      

      ctx = created: (new Date()).getTime(), worksheets: worksheetsXML;
      workbookXML = format(tmplWorkbookXML, ctx);



      var link = document.createElement("A");
      link.href = uri + base64(workbookXML);
      link.download = wbname || 'Workbook.xls';
      link.target = '_blank';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    
  )();

【讨论】：

这真是天才！ :-) 我已经尝试过了，但我的表格有内联 CSS，所以它不起作用。请检查这个小提琴jsfiddle.net/kdkd/qxLn3h86/49 这个链接可能对你有帮助。***.com/questions/18467418/… 那是文件，但两个代码不同，一个用于创建多个工作表，另一个用于 CSS .. 我如何合并？？？此答案在 IE 11 中不起作用。是否有任何替代解决方案可以使其在 IE 上运行？提前致谢

以上是关于如何将excel 转换为html的主要内容，如果未能解决你的问题，请参考以下文章

如何将excel 转换为html

如何将带有html标签的一列文本转换为excel中vba中的格式化文本

如何将word，excel，powerpoint等转换成html或pdf

如何将Excel数据转换为SQL脚本

如何将HTML给转换成Excel格式了给转换成Excel格式