Question

我想下载一个csv文件，并在单词之间保留空白区域。

HTML

<select id="ddl">
   <option value="1">One apple</option>
   <option value="2">Two Oranges</option>
   <option value="3">Three Grapes</option>
</select>

JAVASCRIPT

var ddlArray= new Array();
var ddl = document.getElementById('ddl');

for (i = 0; i < ddl.options.length; i++) {
  ddlArray[i] = ddl .options[i].text;
}

var csvRows = [];
for (i = 0; i < ddlArray.length; i++) {
   csvRows.push(ddlArray[i]+",");
}
var csvString = csvRows.join("%0A");


var a = document.createElement('a');

a.href = 'data:attachment/csv,' + csvString;
a.target = '_blank';
a.download = 'sampleDownload.csv';

document.body.appendChild(a);
a.click();

当我执行上面的代码时，会下载sampleDownload.csv，但是选项值会被修剪，以便丢失所有空格。示例＆＃34; OneApple＆＃34;而不是＆＃34; One Apple＆＃34;。是否可以保留csv文件中的空格？

如果我执行警报，则值确实包含空格。

请帮忙。

该片段也可以在JSFiddle中找到：点击此处：http://jsfiddle.net/p25x8gfw/8/

这将在您的计算机上下载samleDownload.csv。适用于Chrome和Firefox。

Answer 1

试试这个...

var ddlArray= new Array();
var ddl = document.getElementById('ddl');
for (i = 0; i < ddl.options.length; i++) {
   ddlArray[i] = ddl .options[i].text.replace(' ', '%20');
}

var csvRows = [];
for (i = 0; i < ddlArray.length; i++) {
    csvRows.push(ddlArray[i].replace(' ', '%20')+",");}


    var csvString = csvRows.join("%0A");


var a = document.createElement('a');

a.href = 'data:attachment/csv,' + csvString;
a.target = '_blank';
a.download = 'sampleDownload.csv';

document.body.appendChild(a);
a.click();

此处csv文件认为％20 为空白

Answer 2

将ddlArray[i] = ddl .options[i].text;更改为ddlArray[i] = ddl .options[i].text.replace(' ', '%20');

Answer 3

更通用的解决方案可能是使用encodeURI（），例如：

a.href = 'data:attachment/csv,' + encodeURI(csvString);

这样可以保留所有特殊字符（例如换行符或制表符），而不仅仅是空格

从HTML下拉列表生成csv文件时删除了空格

3 个答案: