Vue项目-前端实现导出功能

组件化形式实现

1.新建Excel组件

<template>
    <!-- 导出文件 -->
    <div>
        <button @click="handleClick">
            <slot name="Exceltxt"></slot>
        </button>
    </div>
</template>

<script>
export default {
    props: {
        json: {
            type: Array,
            default: []
        }
    },
    data () {
        return {

        }
    },
    methods: {
        handleClick () {
            this.$emit('handleExcel', this.json)
        }
    }
}
</script>

<style>

</style>

2.封装一个工具类（重点）

首先下载包 npm i xlsx

import * as XLSX from 'xlsx'
export default function download(json, fileName) {
    const type = 'xlsx' //定义导出文件的格式
    var tmpDown; //导出的内容
    var tmpdata = json[0];
    json.unshift({});
    var keyMap = []; //获取keys
    for (var k in tmpdata) {
        keyMap.push(k);
        json[0][k] = k;
    }
    var tmpdata = []; //用来保存转换好的json 

    json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
        v: v[k],
        position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
    }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
        v: v.v
    });
    var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
    var tmpWB = {
        SheetNames: ['mySheet'], //保存的表标题
        Sheets: {
            'mySheet': Object.assign({},
                tmpdata, //内容
                {
                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                })
        }
    };
    tmpDown = new Blob([s2ab(XLSX.write(tmpWB, {
            bookType: (type == undefined ? 'xlsx' : type),
            bookSST: false,
            type: 'binary'
        } //这里的数据是用来定义导出的格式类型
    ))], {
        type: ""
    }); //创建二进制对象写入转换好的字节流
    saveAs(tmpDown, fileName);
}

function saveAs(obj, fileName) { //导出功能实现
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下载";
    tmpa.href = URL.createObjectURL(obj); //绑定a标签
    tmpa.click(); //模拟点击实现下载
    setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
    }, 100);
}

function s2ab(s) { //字符串转字符流
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

function getCharCol(n) {
    let temCol = '',
        s = '',
        m = 0
    while (n > 0) {
        m = n % 26 + 1
        s = String.fromCharCode(m + 64) + s
        n = (n - m) / 26
    }
    return s
}

3.你的页面里调用这个组件

<template>
    <div>
        <Button @handleExcel="handleExcel"
                :json="datas">
            <p slot="Exceltxt">导出Excel表格</p>
        </Button>
    </div>
</template>

<script>
// 模拟数据
let datas = [{
    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'
},]
import Button from '../../components/Excel'
import download from '../../utils/Excel'
export default {
    components: {
        Button,
    },
    data () {
        return {
            datas
        }
    },
    methods: {
        handleExcel (datas) {
            let json = datas.map(item => { //将json数据的键名更换成导出时需要的键名
                return {
                    '姓名': item.name,
                    '固定电话': item.phone,
                    '邮箱': item.email
                }
            })
            download(json, '人员信息.xlsx')//导出的文件名
        },
    },
}
</script>

<style>

</style>