前端数据导出Excel，两张简便方式

方法一：通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，代码如下

function tableToExcel(){//要导出的json数据var jsonData = [{name:'路人甲',phone:'123456789',email:'000@123456.com'},{name:'炮灰乙',phone:'123456789',email:'000@123456.com'},{name:'土匪丙',phone:'123456789',email:'000@123456.com'},{name:'流氓丁',phone:'123456789',email:'000@123456.com'},]//列标题，逗号隔开，每一个逗号就是隔开一个单元格let str = `姓名,电话,邮箱\n`;//增加\t为了不让表格显示科学计数法或者其他格式for(let i = 0 ; i < jsonData.length ; i++ ){for(let item in jsonData[i]){str+=`${jsonData[i][item] + '\t'},`;     }str+='\n';}//encodeURIComponent解决中文乱码let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);//通过创建a标签实现var link = document.createElement("a");link.href = uri;//对下载的文件命名link.download =  "json数据表.csv";document.body.appendChild(link);link.click();document.body.removeChild(link);}

方法二：使用了 vue-json-excel 插件

复制代码
npm install vue-json-excel
或
npm i vue-json-excel

然后在 main.js 文件里加入

复制代码
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

最后在需要使用的地方

复制代码
    :data="json_data" 
    name="excel.xls"
>
    下载文件

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！