用純js的方法實(shí)現(xiàn)生成cvs文件，避免使用多余插件

首先寫一個(gè)下載方法，我是在vue里面實(shí)現(xiàn)的，其實(shí)和普通html一樣只不過是引用實(shí)例的方式不同而已

downloadActorData(){

? ? ? var that = this;

? ? ? //列標(biāo)題，逗號(hào)隔開，每一個(gè)逗號(hào)就是隔開一個(gè)單元格

? ? ? var str = `UserName,Name,TypeId,Type\n`;

? ? ? var data={

? ? ? ? ? ? list:[

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? "id":01

? ? ? ? ? ? ? ? ? ? "name":"張三"

????????????????}

????????????]

????????}

? ? ? ? ?for(var item in data.list) {

? ? ? ? ? ? str += `${ item?.id},`;

? ? ? ? ? ? str += `${ item?.name}`;

? ? ? ? ? ? str += "\n";

? ? ? ? ? });

? ? ? ? }

? ? ? ? that.exportAndDownloadCSV(str);//此處調(diào)用生成cvs文件方法

? ? ? // console.info(that.$data.dsActorList);

? ? ? });

? ? },

生成cvs方法

exportAndDownloadCSV(str){

? ? ? let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);

? ? ? console.log(str);

? ? ? //通過創(chuàng)建a標(biāo)簽實(shí)現(xiàn)

? ? ? let link = document.createElement("a");

? ? ? link.href = uri;

? ? ? //對(duì)下載的文件命名

? ? ? link.download =? "export.csv";

? ? ? document.body.appendChild(link);

? ? ? link.click();

? ? ? document.body.removeChild(link);

? },

詳細(xì)html參考博文鏈接https://blog.csdn.net/hhzzcc_/article/details/80419396

這個(gè)鏈接說的會(huì)更加詳細(xì)一下，我這個(gè)只是為了實(shí)現(xiàn)功能做出來的一個(gè)小筆記