使用javascript上传和下载csv文件下载按钮不起作用

编程问答 2022-10-31

问题描述

我正在使用 JavaScript 上传和下载 csv 文件代码。上传按钮应该从您的计算机搜索文件并加载到 HTML 网页中。这个工程文件。此外，在这种情况下，csv 应该是可编辑的，这也很有效。但是，我需要在输入一些细节后下载相同的 csv 文件。这里的问题是下载按钮不起作用。下面是我自己开发的代码，请指教。感谢您的支持。

        var fileUpload = document.getElementById("fileUpload1");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var table = document.createElement("table");
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < rows.length; i++) {
                        var cells = rows[i].split(",");
                        if (cells.length > 1) {
                            var row = table.insertRow(-1);
                            for (var j = 0; j < cells.length; j++) {
                                var cell = row.insertCell(-1);
                                cell.innerHTML = cells[j];
                            }
                            
                        }
                    }
                    var dvCSV1= document.getElementById("dvCSV1");
                    dvCSV1.innerHTML = "";
                    dvCSV1.appendChild(table);
                }
                reader.readAsText(fileUpload.files[0]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }
        
    }

</script>

<script>

function Download() {
    var csv = document.getElementById("fileUpload1");
        //var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; 
 data.forEach(function(row) {
        var row1 = []; 
        row.forEach(function(item) { // handling commna in data values
        if(item.indexOf(',') == -1) { // not having comma 
    row1.push(item);
  } else {
    item = "\"" + item + "\"";
    row1.push(item);
  }
     });
 console.log("row1:" + row1)
 csv += row1.join(',');
 csv += "\n";
     });
 
 if (navigator.msSaveBlob) { //IE
  var csvURL =  null;
  var csvData = new Blob([csv],{type: 'text/csv;charset=utf-8;'});
                csvURL = navigator.msSaveBlob(csvData,'download-reports.csv');
 } else { // Firefox,Chrome
         console.log(csv);
  //var hiddenElement = document.createElement('a');
                var hiddenElement = document.getElementById('fileUpload1'); //For Firefox 
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
  hiddenElement.target = '_blank';
  hiddenElement.download = 'download-reports.csv';
  hiddenElement.click();
    }  
}
</script>

<input type="file" id="fileUpload1" />
<input type="button" id="upload" value="Upload" onclick="Upload()" />        
<input type="button" id="Download" value="Download CSV" onclick="Download()" > ```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

csvcsvcsvdatatablesdownloadjavascriptjquery