element表格导出excel

最新推荐文章于 2024-07-15 14:11:24 发布

倘若hfl

最新推荐文章于 2024-07-15 14:11:24 发布

阅读量583

点赞数 2

分类专栏： Element 文章标签： elementui excel

本文链接：https://blog.csdn.net/hu104160112/article/details/111036062

版权

Element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

element不借助其他插件导出excel
直接上代码

<!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://unpkg.com/element-ui/lib/theme-chalk/index.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.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/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>

倘若hfl

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
element表格导出excel

element不借助其他插件导出excel直接上代码<!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 re
复制链接

扫一扫

专栏目录