Vue export element form

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://sucai.suoluomei.cn/sucai_zs/file/20200330151323-element-ui.css">
</head>

<body>
    <div class="box">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
        <el-button type="primary" @click="exportEx">导出excel</el-button>
    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.js"></script>
<script>
    new Vue({
     
     
        el: '.box',
        data: {
     
     
            tableData: [{
     
     
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
     
     
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
     
     
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
     
     
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        },
        methods: {
     
     
            exportEx() {
     
     
                let str = `date,name,address\n`;
                var jsonData = this.tableData
                //增加\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标签实现
                let link = document.createElement("a");
                link.href = uri;
                //对下载的文件命名
                link.download = "json数据表.xls";
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },
        }
    })
</script>

</html>
Vue export element form

Guess you like
