elementui导出数据为xlsx、excel表格

ElementUI是一款基于Vue.js的组件库，提供了丰富的UI组件，其中也包含了导出Excel表格的功能。下面是ElementUI导出数据为xlsx、excel表格的详细攻略：

第一步：安装依赖

首先，在项目中导出Excel表格需要安装以下依赖：

npm install -S file-saver xlsx

其中，file-saver用于文件下载，xlsx用于数据处理和生成Excel表格。

第二步：引入ElementUI组件

在需要生成Excel表格的Vue页面中，引入ElementUI组件：

<template>
  <div>
    <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出Excel</el-button>
  </div>
</template>

<script>
import { exportFile } from 'element-ui/lib/utils/export';
// 其他import内容 ...

export default {
    // 其他组件配置 ...
    methods: {
        handleDownload() {
            // 导出Excel表格的方法
        }
    }
}
</script>

其中，import的export是ElementUI内部封装的导出功能，依赖xlsx和file-saver库。

第三步：生成Excel表格数据

生成Excel表格需要一个包含数据的数组，然后转换为xlsx格式的二进制流。这里提供两个示例。

示例1：表格数据包含多个sheet

data() {
    return {
        // 表格数据
        tableData: [
            {id: 1, name: '小红', age: 23},
            {id: 2, name: '小明', age: 25},
            {id: 3, name: '小华', age: 27},
        ]
    }
},
methods: {
    async handleDownload() {
        const wb = xlsx.utils.book_new();
        const ws1 = xlsx.utils.json_to_sheet(this.tableData);
        const ws2 = xlsx.utils.json_to_sheet([{id: 1, value: 'hello world'}]);
        xlsx.utils.book_append_sheet(wb, ws1, 'Sheet1');
        xlsx.utils.book_append_sheet(wb, ws2, 'Sheet2');
        const data = xlsx.write(wb, {bookType: 'xlsx', type: 'array'});
        exportFile(data, 'test.xlsx', 'xlsx');
    },
}

以上代码将数据this.tableData转换为一个Sheet表，同时增加了另一个Sheet表。

示例2：表格数据包含图片

data() {
    return {
        // 表格数据
        tableData: [
            {id: 1, name: '小红', age: 23, img: 'https://xxx.jpg'},
            {id: 2, name: '小明', age: 25, img: 'https://xxx.png'},
            {id: 3, name: '小华', age: 27, img: 'https://xxx.gif'},
        ]
    }
},
async handleDownload() {
    const wb = xlsx.utils.book_new();
    const ws = xlsx.utils.json_to_sheet(this.tableData);
    // 遍历数据，增加图片
    this.tableData.forEach((item, index) => {
        const img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');
        img.src = item.img;
        img.onload = () => {
            const ctx = this.$el.querySelector('#canvas').getContext('2d');
            ctx.drawImage(img, 0, 0, 60, 60);
            const imageData = ctx.getImageData(0, 0, 60, 60);
            const base64 = btoa(
                String.fromCharCode.apply(null, imageData.data)
            );
            xlsx.utils.sheet_add_aoa(ws, [
                ['<img src="data:image/png;base64,' + base64 + '"/>'],
            ], {
                origin: { r: index + 1, c: 4}
            });
            xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
            const data = xlsx.write(wb, {bookType: 'xlsx', type: 'array'});
            exportFile(data, 'test.xlsx', 'xlsx');
        };
    });
},

以上代码遍历表格数据中的每一项，将对应图片绘制在Canvas上，再将Canvas通过toDataURL方法生成base64编码，通过sheet_add_aoa方法增加到Excel表格中。

以上就是ElementUI导出数据为Excel的完整攻略，其中包含了两条示例说明，希望可以对你有所帮助。