时间戳

首页 > 解决方案 > 将 HTML 元素的内容导出到 JS 中的 CSV 文件

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

问题描述

我正在尝试将显示的值放在 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>

标签： javascripthtmlexport

解决方案

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

推荐阅读