用純js的方法實現(xiàn)生成cvs文件铸磅,避免使用多余插件
首先寫一個下載方法,我是在vue里面實現(xiàn)的,其實和普通html一樣只不過是引用實例的方式不同而已
downloadActorData(){
? ? ? var that = this;
? ? ? //列標題,逗號隔開,每一個逗號就是隔開一個單元格
? ? ? 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);//此處調用生成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標簽實現(xiàn)
? ? ? let link = document.createElement("a");
? ? ? link.href = uri;
? ? ? //對下載的文件命名
? ? ? link.download =? "export.csv";
? ? ? document.body.appendChild(link);
? ? ? link.click();
? ? ? document.body.removeChild(link);
? },
詳細html參考博文鏈接https://blog.csdn.net/hhzzcc_/article/details/80419396
這個鏈接說的會更加詳細一下歌径,我這個只是為了實現(xiàn)功能做出來的一個小筆記