vue使用js-file-download完成导出功能

1.安装js-file-download

npm install js-file-download

2.引入对应的功能模块

import fileDownLoad from 'js-file-download'
import Axios from 'axios'//ajax请求
import store from '@/store'//设置token

3.代码段

exportData(){
        var _this = this
        Axios({
          url:'ajax url'
          method: 'post',
          headers: {
           'Authorization': token
          },
          data:{
            licenseNo:_this.searchForm.licenseNo,
          },
          responseType: 'blob',
          }).then(res => {
             fileDownload(res.data, new Date().getTime()+ '.xlsx');
          })
      }

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现简洁的导入导出功能可以使用 element-ui 提供的 el-upload 组件和 js-xlsx 库来实现。下面是一个示例代码: 1. 导入 js-xlsx 库 ```javascript import XLSX from 'xlsx' ``` 2. 模板文件下载 ```html <el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板</el-button> ``` ```javascript // 下载模板 downloadTemplate() { const template = [ ['姓名', '性别', '年龄'], ['张三', '男', '23'], ['李四', '女', '25'] ] const ws = XLSX.utils.aoa_to_sheet(template) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') XLSX.writeFile(wb, '导入模板.xlsx') } ``` 3. 导入文件上传 ```html <el-upload class="upload-demo" action="" :on-change="handleUpload"> <el-button slot="trigger" type="primary">上传文件</el-button> <div slot="tip" class="el-upload__tip">支持xlsx、xls格式</div> </el-upload> ``` ```javascript // 处理上传文件 handleUpload(file) { const reader = new FileReader() reader.onload = (e) => { const data = e.target.result const workbook = XLSX.read(data, { type: 'binary' }) const sheetName = workbook.SheetNames[0] const sheet = workbook.Sheets[sheetName] const json = XLSX.utils.sheet_to_json(sheet) console.log(json) // TODO: 处理上传数据 } reader.readAsBinaryString(file.raw) } ``` 4. 导出文件功能 ```javascript // 导出文件 exportExcel(data, fileName) { 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 + '.xlsx') } ``` 以上就是一个简单的 vue + element-ui 实现导入导出功能的示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五月呀

谢谢请喝奶茶~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值