zoukankan      html  css  js  c++  java
  • vue---Excel表格导出

     

    一、安装依赖

         npm install file-saver --save

         npm install xlsx --save

         npm install script-loader --save-dev

    二、下载插件

      到 https://pan.baidu.com/s/1DiIGxik9HaanMQwx2ICGAg 下载插件(密码:fkkg)

    三、在src目录下创建一个vendor文件,把下载的插件复制进去

    四、修改build/webpack.base.conf.js

      'vendor': path.resolve(__dirname, '../src/vendor')

    五、在methods方法里

    export_Excel() {
            var listStudent = null;
            this.axios.get('api/exportStudentList').then((response) => {
              listStudent = response.data.list;
            })
                    //↑ 是获取数据
                    
            this.$confirm('确定要导出表格数据么?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              require.ensure([], () => {
                const {
                  export_json_to_excel
                } = require('../vendor/Export2Excel')
    
                const tHeader = ['ID', '姓名', '年龄', '性别', '生日']
                const filterVal = ['id', 'name', 'age', 'sex', 'birthday']
                const list = listStudent
                const data = this.formatJson(filterVal, list)
                export_json_to_excel(tHeader, data, '商品管理列表')
              })
            }).catch(() => {})
          },
          formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
          }

     导出之后长这样

      

  • 相关阅读:
    第二阶段冲刺7
    第二阶段冲刺6
    课后作业02需求分析
    阅读计划
    个人总结
    第十六周学习进度条
    第十五周学习进度条
    《梦断代码》阅读笔记03
    《梦断代码》阅读笔记02
    《梦断代码》阅读笔记01
  • 原文地址:https://www.cnblogs.com/zyulike/p/9680840.html
Copyright © 2011-2022 走看看