繁体   English   中英

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

[英]How Do I Export Data From HTML Webpage Using Javascript To Microsoft Excel Keeping The GridLines Turned On?

我整个下午一直在研究,并尝试使用我在互联网和 Stack OverFlow 上找到的各种解决方案,以尝试在我从 HTML 网页导出数据时保持网格线打开,但无济于事。 我真的很想避免使用插件,而我认为这种简单的东西不应该需要。 我真的很震惊,事实证明这和它一样具有挑战性。 无论如何......我找到了这个代码......

 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();
      }
  }

再加上这个HTML.....

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

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

这一切都很好! 除了当我打开文件时,网格线消失了,用户每次都必须转到视图选项卡并重新打开网格线。 是否有我可以在某处更改的设置允许这样做?

这个 SO 中的第二个例子有效......但我有一个问题,我需要使用一个按钮而不是一个输入按钮......为了样式目的......然后这样做是因为解决方案被写成一个 var而不是一个函数....我在解决这个问题时遇到了麻烦。 所以我知道我正在尝试做的事情是可能的......我只是无法弄清楚如何在没有插件的情况下将其作为 Javascript 来执行。 我对 Javascript 还很陌生,所以提前感谢您的指点……也许我可以如何将第二个解决方案重写为函数?

这是我发现有效的代码......

<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>

但是我需要重写它,以便我可以像上面代码开头引用的第一个函数一样调用它。 再次感谢您的任何指点或想法。

经过更多研究,我意识到第二段代码就是答案。 我只需要按如下方式更新我的 HTML 按钮参考...

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM