Question

我正在尝试将显示的值放在CSV文件的标签中。但是，导出时，我会下载一个空文件。我在做什么错了？

document.getElementById("export").addEventListener("click",function(){
    var file;
    var download = document.getElementById("fileContents").textContent;
    download = file;
},false)

<!DOCTYPE html>
<html lang="pt-pt">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <input type="file" id="openFile"/>
    <a id="export" download="export.csv" href="data:text/html,">Export</a>
    <br>
    <br>
    <br>
    <!-- preformatted text -->  
    <pre id="fileContents">
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo</pre>
    <!--/preformatted text -->  

    <!-- app.js -->
    <script src="js/app.js"></script>  
  </body>
</html>

Answer 1

您可以通过在脚本中再添加一行来将文本内容添加到<a>元素中：

document.getElementById("export").addEventListener("click",function(){
    var download = document.getElementById("fileContents").textContent;
    // adds text to <a> element
    this.setAttribute('href', 'data:text/html,' + encodeURIComponent(download)); 
},false)

Answer 2

您可以构建要通过data URI下载的文件。为此，请将锚标记的'href'属性设置为对要下载的文件进行编码的数据URI。如果您使用纯文本（而非base64）URI，请确保并使用URL转义您要编码的字符串。

document.getElementById("export").addEventListener("click",function(){
    let dataUri = 'data:text/html,' 
        + encodeURIComponent(document.getElementById("fileContents").textContent);
    this.href = dataUri;        
},false)

<!DOCTYPE html>
<html lang="pt-pt">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <input type="file" id="openFile"/>
    <a id="export" download="export.csv" href="data:text/html,">Export</a>
    <br>
    <br>
    <br>
    <!-- preformatted text -->  
    <pre id="fileContents">
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo
    ojdaoj,feokokfe,dawff,efofewfo</pre>
    <!--/preformatted text -->  

    <!-- app.js -->
    <script src="js/app.js"></script>  
  </body>
</html>

将HTML元素的内容导出到JS中的CSV文件

2 个答案: