如何在vue.js中创建CSV文件 [英] How to create CSV file in vue.js

问题描述

我尝试在vue.js中创建CSV文件.服务器发送准备数据，这是我们可以直接将数据写入csv文件的方法.来自服务器响应的数据是

I have tried to create CSV file in vue.js. server send readyment data which is we can directly write data in csv file. data from server response is

head1, head2, head3, head4
1,2,3,4
5,6,7,8

这是我从服务器收到的回复.我想以CSV格式写入此数据，并提供CSV下载功能.

This is my response formate from the server. I want to write this data in CSV format and give download CSV functionality.

有关于在vue.js中创建和写入文件的想法吗?

Any Idea about create and write a file in vue.js?

推荐答案

我通过使用javascript得到了答案.

I got my answer by using javascript.

我已经创建了一个隐藏的html <a>标记

I have create one hidden html <a> tag

<a href="" id="downloadlink" ref="csvfiledownload" hidden="true" download="mycsv.csv">download</a>

贝鲁是我下载csv的javascript函数

Bellow is my javascript function for download csv

downloadCSV(data){
    var link = document.getElementById('downloadlink');
    link.href = Utils.makeTextFile(response.data);
    link.style.display = 'block';
    link.click();
}

数据值是CSV格式数据

value of data is in CSV format data

col1, col2, col3
row1-value1, row1-value2, row1-value3

这是我的makeTextFile函数.

here my makeTextFile function.

function makeTextFile {
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "mycsv.csv");
    document.body.appendChild(link);
    return link;

}

这篇关于如何在vue.js中创建CSV文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！