vue 导出表格功能

在Vue.js中实现导出表格的功能通常会结合一些第三方库，比如`xlsx`、`js-xlsx` 或者 `clipboard.js` 等。以下是简单步骤：

1. **安装依赖**：首先你需要在项目中安装需要的库，例如使用npm安装：

   npm install xlsx clipboardjs

2. **引入库**：在Vue组件中导入这些库：

   import XLSX from 'xlsx';
   import ClipboardJS from 'clipboard-js';

3. **创建数据表格**：
将数据绑定到HTML的table元素上，你可以使用v-bind或计算属性来动态渲染。

4. **导出为Excel**：
当用户点击导出按钮时，编写一个方法来生成Excel文件。例如，假设你有一个名为`data`的数组表示表格内容：

   exportTable() {
     const workbook = XLSX.utils.book_new();
     const ws = XLSX.utils.aoa_to_sheet(data);
     XLSX.writeFile(workbook, 'output.xlsx', { type: 'xlsx' });
   }

5. **复制链接到剪贴板**：
使用ClipboardJS将生成的文件URL粘贴到剪贴板，供用户直接下载：

   const clipboard = new ClipboardJS('.export-button');
   clipboard.on('success', () => {
     this.$message.success('文件已复制到剪贴板，可以直接下载！');
   });
   clipboard.on('error', error => {
     this.$message.error(`复制失败: ${error.message}`);
   });

6. **添加导出按钮**：
在模板中添加一个按钮，并绑定了上述的`exportTable`函数作为事件处理器：

   <button class="export-button" @click="exportTable">导出为Excel</button>