为啥前端js把html文件中的table生成的excel文件 文件类型实际上是网页文件(.htm)

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥前端js把html文件中的table生成的excel文件 文件类型实际上是网页文件(.htm)相关的知识，希望对你有一定的参考价值。

为什么前端js把html文件中的table生成的excel文件 文件类型实际上是网页文件(.htm)

参考技术A 那改下后缀类型试下追问

生成的文件后缀是.xls没有问题 也能打开看到里面的内容 但是如果另存为的时候就会发现这个excel文件实际的文件类型为网页文件 导致java用poi读取的时候报错 提示不是一个excel文件

追答

没遇到过这种情况，很难说

 参考技术B 我现在也在做这个， 你用的方法导出的excel其实是假的，不是真实的excel格式，网上有很多教程方法，我目前是需要真实excel加样式，还没找到有效方法，你们没要求的话，只要把文件打开另存为excel格式就可以用了

html JS.HTML.CSS.Live编码视频：动态table.EX1

table {
  width:100%;
  border:1px solid;
  border-collapse: collapse;
}


tr, th, td {
  border:1px solid;
  font-family:courier;
}

td {
  text-align:center;
  padding:10px;
  
}
function insertRow() {
  var table = document.querySelector("#myTable");
  
  // without parameters, insert at the end,
  // otherwise parameter = index where the row will be inserted
  var row = table.insertRow();
  
  row.innerHTML = "<td>New</td><td>New</td><td>New</td>"
  
  /*
  var cell1 = row.insertCell();
  cell1.innerHTML = "<b>New cell1</b>";
  var cell2 = row.insertCell();
  cell2.innerHTML = "New cell2";
  var cell3 = row.insertCell();
  cell3.innerHTML = "New cell3";
  */
}

function deleteFirstRow() {
  var table = document.querySelector("#myTable");
  table.deleteRow(1); // 0 is the header
}
JS.HTML.CSS.Live coding video: dynamic table.EX1
------------------------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/zJgyNe) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/zJgyNe/license).
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A typical HTML table with simple styling</title>
</head>
<body>
<table id="myTable">
 <caption>A typical HTML table</caption>  
  <tr>
    <th scope="col">Given Name</th>
    <th scope="col">Family Name</th> 
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>Michel</td>
    <td>Buffa</td> 
    <td>52</td>
  </tr>
  <tr>
    <td>Dark</td>
    <td>Vador</td> 
    <td>Unknown</td>
  </tr>
    <tr>
    <td>Luke</td>
    <td>Skywalker</td> 
    <td>Unknown</td>
  </tr>
</table>
  <p>Click to add a new row</p>
  <button onclick="insertRow();">Add a new row</button>
  <p>Click to delete the first row of the table</p>
  <button onclick="deleteFirstRow();">Delete first row</button>
</body>
</html>

以上是关于为啥前端js把html文件中的table生成的excel文件 文件类型实际上是网页文件(.htm)的主要内容，如果未能解决你的问题，请参考以下文章

JS实现前端将数据导出excel

html JS.HTML.CSS.Live编码视频：动态table.EX1

EXT JS 如何从后台生成一个table表格 在线等 30分

js如何实现点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）

js导出table中的EXCEL总结

在table中的前端排序