Question

我遇到一种情况，我想将HTML列表数据存储为数组的HTML数据属性。然后将所有数据导出到一个csv文件中。

HTML标记：

<ul class="unordered-list">                                 
    <li class="list-item"> 
        list item 1
    </li>
    <li class="list-item"> 
        list item 2
    </li>
    <li class="list-item"> 
        list item 3
    </li>
    <li class="list-item"> 
        list item's description
    </li>
    <li class="list-item"> 
        list item 5, this is list.
    </li>
</ul>

用于存储数据属性的按钮HTML：

<button class='import-list btn btn-success' data-title='" + title + "' data-desc='" + desc + "'>Export</button>

JavaScipt / jQuery代码：

var desc = new Array(); 

 $(".unordered-list").find('.list-item').each(function(){
        var elem = $(this).text().trim();
        desc.push(elem);
    });

    $(".import-list").on("click", function(){

        var listArray = $(this).attr('data-desc');

        const replacer = (key, value) => value === null ? '' : value.replace(/\\/g, ''); // specify how you want to handle null values here
        const header = Object.keys(listArray[0]);
        let csv = listArray.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
        csv.unshift(header.join(',').replace(/\b\w/g, l => l.toUpperCase()));
        csv = csv.join('\r\n');

        var hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csv);
        hiddenElement.target = '_blank';
        hiddenElement.download = 'export.csv';
        hiddenElement.click();
    });

这可行，但是问题是：当我将其导出为CSV时，data-desc值将转到不同的单元格或单个单元格中，但由于某些字符串内部也带有逗号，因此无法将它们标识为数组。

我只想要

当将其导出为CSV时，每个自定义数据属性应转到不同的单元格。
data-desc的值也可以作为单个单元格中的数组。

将HTML列表存储到数据属性中并导出到CSV

0 个答案: