vue2elementui导入excel文件处理后导出

### Vue2 和 ElementUI 实现 Excel 文件的导入与导出 #### 使用 `xlsx` 库读取并解析 Excel 数据 为了能够处理 Excel 文件，在项目中安装必要的依赖库： ```bash npm install xlsx file-saver element-ui --save ``` 通过引入这些库，可以方便地操作 Excel 文件以及提供良好的用户体验。 #### 创建文件上传组件用于导入 Excel 文件 在 Vue 组件内定义一个表单域来接收用户的文件输入，并利用 ElementUI 的 `<el-upload>` 组件简化此过程。当用户选择了要上传的文件之后，触发自定义函数来进行后续的数据加载工作[^1]。 ```html <template> <div class="upload-excel"> <!-- 添加按钮样式 --> <el-button :loading="loading" style="margin-bottom: 20px;" type="primary">选择文件</el-button> <input ref="excelFileInput" accept=".xlsx, .xls" multiple hidden type="file"/> <el-table v-if="tableData.length>0" border fit highlight-current-row height="480" size="mini" stripe style="width: 97%; margin-top: 20px;" :data="tableData"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> ``` 上述模板中的表格部分仅作为示意；实际开发时应根据具体业务逻辑调整列配置。 #### 编写 JavaScript 方法完成数据转换及显示 接下来编写相应的脚本代码片段，负责监听文件变化事件并将获取到的内容渲染至界面上供查看或进一步编辑。 ```javascript <script> import XLSX from 'xlsx'; export default { data() { return { loading: false, tableData: [] }; }, methods: { handleUploadChange(event){ this.loading = true; const files = event.target.files || []; let f = files[0]; var reader = new FileReader(); reader.onload = (e) => { var data = new Uint8Array(e.target.result); var workbook = XLSX.read(data, {type:'array'}); // 假设只有一张sheet页 var firstSheetName = workbook.SheetNames[0]; var worksheet = workbook.Sheets[firstSheetName]; // 将 sheet 转换成 JSON 格式 this.tableData = XLSX.utils.sheet_to_json(worksheet); setTimeout(() => { this.$refs.excelFileInput.value = ''; this.loading = false; }, 500); }; reader.readAsArrayBuffer(f); } }, mounted(){ this.$nextTick(function () { this.$refs.excelFileInput.addEventListener('change',this.handleUploadChange.bind(this)); }); } } </script> ``` 这段代码实现了从本地磁盘选取 `.xlsx` 或者 `.xls` 类型文档的功能，并将其内容转化为易于理解的形式呈现给前端使用者。 #### 构建导出功能以便分享修改后的资料 最后一步就是允许用户下载经过任何可能更改过的记录集为新的电子表格档桉。这里采用了一种较为简便的方式——直接构建 Blob 对象并通过创建临时链接的方式来启动浏览器默认行为以保存目标档案[^2]。 ```javascript methods:{ ..., exportToExcel() { require.ensure([], () => { const tHeader = ['日期','姓名','地址']; const filterVal = ['date','name','address']; import('@/vendor/Export2Excel').then(excel => { const list = this.tableData.map(item=>filterVal.map(key=>item[key])); excel.export_json_to_excel({ header: tHeader, data: list, filename: "example", autoWidth: true, bookType: 'xlsx' }) }) }) } }, ``` 以上即是在基于 Vue.js 平台之上运用第三方插件达成对 Microsoft Office 文书格式的支持方案概述[^3]。