Question

我有代码可以像excel一样下载HTML表格

这是代码

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

<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Експортувати в Excel">

现在，它的下载方式类似于“ download.xls”，我需要将其命名为DateTime。我该怎么办？

Answer 1

您应将<a>元素与download属性一起使用，以确定文件的名称。

以下是如何动态创建<a>元素并将src和download服装设置为下载的示例：

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]--></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
    }
    
    // here's how to download with datetime file name.

    // DateTime filename
    var filename = new Date().getTime();
    
    var element = document.createElement('a');
    element.setAttribute('href', uri + base64(format(template, ctx)));
    element.setAttribute('download', filename);
    element.style.display = 'none';

    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  }
})()

var table = document.getElementsByTagName('table')[0];
var newTableToExcel = new tableToExcel(table, 'myname');

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Answer 2

如果要在客户端实现它，则HTML5在 dowload 标记

中提供 <a> 属性

<a href="http://www.google.com/.." download="download.xls">download me</a>

JavaScript解决方案

function setDownloadFileName() {
    var a = document.getElementById("dowloadFileID");
    a.setAttribute("download","FileName_" + new Date().getTime()+ ".xlsx");
}

document.getElementById("dowloadFileID").addEventListener("click", setDownloadFileName);

<a id="dowloadFileID" href="Link../" >Download</a>

参考：

https://html.spec.whatwg.org/dev/links.html#downloading-resources

https://developers.google.com/web/updates/2011/08/Downloading-resources-in-HTML5-a-download

Answer 3

how to download file using anchor tag <a>

将URL设置为锚元素的href，并强制onClick（）事件下载名称为

的文件

示例： <a href="/images/myw3schoolsimage.jpg" download="filename.xls">

<script>
var links = [....]
var _html = links.map(link => {
    return `<a href="${link}" download="${Date.now()}.xls">`
}).join();
body.innerHTML += `<div style="display:none;" class="downloadList">${_html}</div>`;
Array.from(document.querySelectorAll('.downloadList a')).map(anchor => anchor.click());

很显然，有很多优化要完成，这是一个粗糙的例子。但应该可以

现在具有日期时间（JS）的名称文件

3 个答案: