如何利用vue和Element-plus实现数据的导出和打印功能

1. 前言

在实际项目中，我们通常需要对数据进行导出和打印，为了提高开发效率和提升用户体验，我们可以利用Vue和Element-plus框架来实现这种功能。在本文中，我们将详细介绍如何使用Vue和Element-plus框架实现数据的导出和打印功能。

2. Element-plus介绍

Element-plus是饿了么团队基于Vue3开发的一套开源的UI组件库，提供了一系列丰富的UI组件和插件，包括表单、表格、对话框等等。Element-plus的组件库特性如下：

易用性：Element-plus提供了丰富的演示示例和API文档，让使用者可以轻松上手使用

灵活性：Element-plus提供了多种Custom Themes模板，自定义主题Color

可扩展性：Element-plus提供了插件机制和COMPOSABLE API提供扩展

标准化：Element-plus遵循W3C标准，并且提供多语言支持，可以适配不同的场景

3. 实现数据导出

在实际项目中，数据导出通常需要满足以下几个要求：

支持多种文件格式，如Excel、CSV等

可以自定义导出文件名

可以导出指定的数据范围

我们可以使用Element-plus的el-table和XLSX插件来实现这些功能。

3.1 安装XLSX插件

XLSX是一款JS工具库，用于解析和创建Excel文件，我们可以使用npm命令来安装：

npm install xlsx --save

3.2 创建一个数据表格

首先，我们需要创建一个数据表格，我们可以使用el-table组件来实现。将数据和列传递给组件，并使用scoped-slot来自定义表格的单元格：

  <template>
    <el-table :data="tableData">
      <el-table-column label="日期" prop="date"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column>
        <template v-slot="{row}">
          <span v-if="row.score >= 90" class="success">{{ row.score }}</span>
          <span v-else-if="row.score < 60" class="danger">{{ row.score }}</span>
          <span v-else>{{ row.score }}</span>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2021-08-01',
            name: '小明',
            address: '北京',
            score: 88
          }, {
            date: '2021-08-02',
            name: '小红',
            address: '上海',
            score: 95
          }, {
            date: '2021-08-03',
            name: '小张',
            address: '广州',
            score: 62
          }, {
            date: '2021-08-04',
            name: '小花',
            address: '深圳',
            score: 58
          }]
        };
      }
    };
  </script>

这里我们创建了一个简单的表格，包含date、name、address和score四列数据。

使用Scoped Slot可以实现自定义单元格，这可以为我们提供更好的使用体验。

3.3 创建导出按钮

接下来，我们需要创建一个按钮，用于触发导出功能：

<el-button type="primary" @click="handleDownload">导出</el-button>

我们绑定了一个handleDownload方法到点击事件上。

3.4 导出表格数据

现在，我们需要在handleDownload方法中实现导出功能：

  import XLSX from 'xlsx';
  export default {
    methods: {
      handleDownload() {
        const data = this.generateData(this.tableData);
        const filename = `data-${Date.now()}.xlsx`;
        const ws = XLSX.utils.json_to_sheet(data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        XLSX.writeFile(wb, filename);
      },
      generateData(data) {
        // 编写生成数据的逻辑
        // 省略
      }
    }
  };

在handleDownload方法中，我们使用generateData方法来生成要导出的数据，然后使用XLSX插件来将数据写入Excel文件。

在这个例子中，我们使用json_to_sheet方法将数据转换为工作表，然后添加到工作簿中并将其保存为Excel文件。

3.5 完整的代码

以下是完整的代码，包括表格数据和导出功能：

  <template>
    <div>
      <el-table :data="tableData">
        <el-table-column label="日期" prop="date"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column>
          <template v-slot="{row}">
            <span v-if="row.score >= 90" class="success">{{ row.score }}</span>
            <span v-else-if="row.score < 60" class="danger">{{ row.score }}</span>
            <span v-else>{{ row.score }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="handleDownload">导出</el-button>
    </div>
  </template>
  <script>
    import XLSX from 'xlsx';
    export default {
      data() {
        return {
          tableData: [{
            date: '2021-08-01',
            name: '小明',
            address: '北京',
            score: 88
          }, {
            date: '2021-08-02',
            name: '小红',
            address: '上海',
            score: 95
          }, {
            date: '2021-08-03',
            name: '小张',
            address: '广州',
            score: 62
          }, {
            date: '2021-08-04',
            name: '小花',
            address: '深圳',
            score: 58
          }]
        };
      },
      methods: {
        handleDownload() {
          const data = this.generateData(this.tableData);
          const filename = `data-${Date.now()}.xlsx`;
          const ws = XLSX.utils.json_to_sheet(data);
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
          XLSX.writeFile(wb, filename);
        },
        generateData(data) {
          // 编写生成数据的逻辑
          // 省略
        }
      }
    };
  </script>

4. 实现数据打印

数据打印通常也会提供一些基本的功能，如显示或隐藏列，选择打印页面大小和方向等。在这里，我们将以在Vue中使用window.print()方法实现数据打印功能为例：

4.1 创建打印按钮

与导出功能相似，我们需要创建一个按钮，用于触发打印功能。我们可以使用el-button组件来创建按钮：

<el-button type="primary" @click="handlePrint">打印</el-button>

与导出按钮类似，这个按钮会绑定到handlePrint方法。

4.2 创建打印区域

现在我们需要定义要打印的内容。通常，我们会定义一个要使用的打印区域，并从中获取要打印的内容。我们可以使用ref属性来创建一个打印区域，并将其包含在el-table中：

  <el-table ref="table" :data="tableData">
    <!--表格列定义省略-->
  </el-table>

4.3 实现打印功能

现在我们可以开始实现打印功能。我们可以使用以下代码来实现：

  export default {
    methods: {
      handlePrint() {
        const table = this.$refs.table.$el;
        const printWindow = window.open('', 'PRINT');
        printWindow.document.write(table.outerHTML);
        printWindow.print();
        printWindow.close();
      }
    }
  }

在handlePrint方法中，我们使用$refs来获取打印区域，然后使用outerHTML将其转换为完整的HTML字符串，并将其写入新的窗口中。然后我们使用window.print()方法打印该内容，并使用window.close()方法关闭新打开的窗口。

4.4 完整代码

以下是完整的代码，包括表格数据和打印功能：

  <template>
    <div>
      <el-table ref="table" :data="tableData">
        <el-table-column label="日期" prop="date"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column>
          <template v-slot="{row}">
            <span v-if="row.score >= 90" class="success">{{ row.score }}</span>
            <span v-else-if="row.score < 60" class="danger">{{ row.score }}</span>
            <span v-else>{{ row.score }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="handleDownload">导出</el-button>
      <el-button type="primary" @click="handlePrint">打印</el-button>
    </div>
  </template>
  <script>
    import XLSX from 'xlsx';
    export default {
      data() {
        return {
          tableData: [{
            date: '2021-08-01',
            name: '小明',
            address: '北京',
            score: 88
          }, {
            date: '2021-08-02',
            name: '小红',
            address: '上海',
            score: 95
          }, {
            date: '2021-08-03',
            name: '小张',
            address: '广州',
            score: 62
          }, {
            date: '2021-08-04',
            name: '小花',
            address: '深圳',
            score: 58
          }]
        };
      },
      methods: {
        handleDownload() {
          const data = this.generateData(this.tableData);
          const filename = `data-${Date.now()}.xlsx`;
          const ws = XLSX.utils.json_to_sheet(data);
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
          XLSX.writeFile(wb, filename);
        },
        generateData(data) {
          // 编写生成数据的逻辑
          // 省略
        },
        handlePrint() {
          const table = this.$refs.table.$el;
          const printWindow = window.open('', 'PRINT');
          printWindow.document.write(table.outerHTML);
          printWindow.print();
          printWindow.close();
        }
      }
    };
  </script>

结语

本文介绍了如何使用Vue和Element-plus框架实现数据的导出和打印功能。我们使用el-table组件来创建数据表格，并使用XLSX插件将其导出为Excel文件。同样地，我们使用el-button组件来创建一个打印按钮，并使用window.print()方法进行数据打印。希望这篇文章可以帮助到你。