如何使用 Javascript 从 HTML 网页导出数据到 Microsoft Excel 并保持 GridLines 打开？

Question

I have been researching all afternoon and playing around with various solutions I have found on the internet and Stack OverFlow to try to keep the gridlines turned on when I export data from my HTML webpage but to no avail.我整个下午一直在研究，并尝试使用我在互联网和 Stack OverFlow 上找到的各种解决方案，以尝试在我从 HTML 网页导出数据时保持网格线打开，但无济于事。 I am really trying to avoid using a plug in and something this simple shouldn't require on in my opinion.我真的很想避免使用插件，而我认为这种简单的东西不应该需要。 I'm actually shocked that this is proving as challenging as it is.我真的很震惊，事实证明这和它一样具有挑战性。 Anyway...I found this code....无论如何......我找到了这个代码......

 function exportTableToExcel(tableID, filename = ''){

  var downloadLink;
  var dataType = 'application/vnd.ms-excel';
  var tableSelect = document.getElementById(tableID);
  var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

  // Specify file name
  filename = filename?filename+'.xls':'excel_data.xls';

  // Create download link element
  downloadLink = document.createElement("a");

  document.body.appendChild(downloadLink);

  if(navigator.msSaveOrOpenBlob){
      var blob = new Blob(['\ufeff', tableHTML], {
          type: dataType
      });
      navigator.msSaveOrOpenBlob( blob, filename);
  }else{
      // Create a link to the file
      downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

      // Setting the file name
      downloadLink.download = filename;

      //triggering the function
      downloadLink.click();
      }
  }

And coupled with this HTML.....再加上这个HTML.....

<table id="tblData" class="table10">
    <tr>
      <th class="title36">Description</th>
    </tr>
</table> 

<button onclick="exportTableToExcel('tblData')"</button>

It all works beautifully!这一切都很好！ Except when I open the file the gridlines are gone and the user would have to go the view tab and turn the gridlines back on every time.除了当我打开文件时，网格线消失了，用户每次都必须转到视图选项卡并重新打开网格线。 Is there a setting I can change somewhere that will allow this?是否有我可以在某处更改的设置允许这样做？

The second example in this SO works...but I have a problem whereby I need to use a button and not an input button....for styling purposes...and then in doing so because the solution is written as a var and not a function....I had trouble working it out.这个 SO 中的第二个例子有效......但我有一个问题，我需要使用一个按钮而不是一个输入按钮......为了样式目的......然后这样做是因为解决方案被写成一个 var而不是一个函数....我在解决这个问题时遇到了麻烦。 So I know what I'm trying to do is possible...I just can't quite figure out how to work out doing this as Javascript without a plugin.所以我知道我正在尝试做的事情是可能的......我只是无法弄清楚如何在没有插件的情况下将其作为 Javascript 来执行。 I'm fairly new at Javascript so thanks in advance for any pointers...perhaps how I can rewrite the second solution as a function?我对 Javascript 还很陌生，所以提前感谢您的指点……也许我可以如何将第二个解决方案重写为函数？

This is the code that I found that works....这是我发现有效的代码......

<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"><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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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>

But I need to rewrite it so that I can call it in like the first function that is referenced at the beginning of my code above.但是我需要重写它，以便我可以像上面代码开头引用的第一个函数一样调用它。 Thanks again for any pointers or thoughts.再次感谢您的任何指点或想法。

Answer 1

After more research I realized the second piece of code was the answer.经过更多研究，我意识到第二段代码就是答案。 I simply needed to update my HTML button reference as follows...我只需要按如下方式更新我的 HTML 按钮参考...

<button type="button" onclick="tableToExcel('tblData',)" class="class"><div class="class1"><h3 class="class2">Export To Excel</h3></div></button>

如何使用 Javascript 从 HTML 网页导出数据到 Microsoft Excel 并保持 GridLines 打开？

问题描述

1 个解决方案

解决方案1
0 2021-06-08 01:16:36

如何使用 Javascript 从 HTML 网页导出数据到 Microsoft Excel 并保持 GridLines 打开？

问题描述

1 个解决方案

解决方案1 0 2021-06-08 01:16:36

解决方案1
0 2021-06-08 01:16:36