vue 项目 上传以及下载excel 图表(思路)

简单的 页面效果图:

要求可以 上传以及可以 下载excel 图表(本文章为思路)

   

目录

导入导出思路:

1.在 components 下创建文件夹并创建文件home.vue;

 2.在 views 下创建文件 download-excel.vue下载文件 和 upload-excel.vue 上传文件,在路由文件里配置路由,使用懒加载进行引入即可!!

3.在首页里,给一个父级div,单个子集div,分别class 命名: 父级 “container”,子集依次是"c_header","c_left","c_right";

4给页面布局: 

5.给头部div 输入文字        智能物流管理系统

6.在layout 文件夹下创建Menuleft.vue 文件;

7.在src 里创建until 文件夹, 且在里边创建request.vue (进行axios)

8.在src 里创建api 文件夹, 且在里边创建excel.js      在其里边引入request.vue 文件

9.在导出文件  download-excel.vue 文件里  

10.  在src 里   创建文件夹 mock  且 创建index.js      

11.    在mock 文件里  创建 excel.js 文件              

12.     在 mock里的index.js 里    <1  引入   excel  

13导出功能

      <1 在download-excel.vue 文件里的方法;

 <2在download-excel.vue  里     引入vendor


导入导出思路:

1.在 components 下创建文件夹并创建文件home.vue;

在路由文件里配置文件,且将此页面作为重定向即可!!

 2.在 views 下创建文件 download-excel.vue下载文件 和 upload-excel.vue 上传文件,在路由文件里配置路由,使用懒加载进行引入即可!


3.在首页里,给一个父级div,单个子集div,分别class 命名: 父级 “container”,子集依次是"c_header","c_left","c_right";


4给页面布局: 

  .container{
           c_header{
                   width:100%;
                    height:60px;
                    position:absolute;
                    left:0;
                    top:0
                   background:#f00; //红色,方便前期观看,后期还需注掉
                    z-index:999
          }
              c_left{
                     width:200px;
                      position:absolue;
                       left:0;
                       top:0;
                       bottom:0;
                       margin-top:60px;
                       background:#f90;//橘黄色
           }
                c_right{
                       position:absolute;
                        top:0;
                        right:0;
                       left:200px;
                       bottom:0;
                       background:#0f9;//绿色

           }

}

5.给头部div 输入文字        智能物流管理系统

并且给头部添加样式让其居中:

 text-align:center;  line-height:60px; font-size:22px

6.在layout 文件夹下创建Menuleft.vue 文件;

在home 页面引入Menuleft.vue文件,且注册Menuleft 在home.vue 页面  第三个子集div class命名为 c_right的里边,给一个出口 <router-view></router-view> 即可!!!


7.在src 里创建until 文件夹, 且在里边创建request.vue (进行axios)

<1   引入axios 
 <2 创建实例
     let  service =axios.create({
         baseURL:"http://localhost:8081",
         timeout:5000
    })
        service.interceptors.request.use(config=>{
           return config
    }),error=>Promise.reject(error)

         service.interceports.response.use(response=>{
            let  res=response.data;
             return  res
    }, error=>reject(error))
     导出
      export  default service;

8.在src 里创建api 文件夹, 且在里边创建excel.js      在其里边引入request.vue 文件

   export function  getDataList(){
       return  request({
                 url:'excel/get'
                 method:"get"
     })
  }

9.在导出文件  download-excel.vue 文件里  

<1 引入api文件下的excel.js   import { getDataList} from './../api/excel'  

 <2  在data 里 放入一个空的数组,并且命名为 tableData    

<3   在created 里边    this.getData()    

<4      在methods 的方法里,进行获取数据,      

getData(){       getDataList().then(res=>{            console.log("res",res);         })     }

10.  在src 里   创建文件夹 mock  且 创建index.js      

<1  引入mock         import  mock from 'mockjs'    

<2

mock.setup({ timeout:'300-600'      })      
  Mock.mock(/\/excel\/get/,'get')

11.    在mock 文件里  创建 excel.js 文件              

//模拟接口返回的数据                    import Mock  from 'mockjs'    

          

//模拟资金管理后台数据
import Mock from 'mockjs' // 导入mockjs 模块

let List = []// 定义我们需要的数据
const count = 10

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({// 根据数据模板生成模拟数据
    id: Mock.Random.guid(),// 随机生成一个id
    username: Mock.Random.cname(),// 随机生成一个常见的中文姓名。
    address: Mock.mock('@county(true)'),// @county(true)为数据模板
    createTime: Mock.Random.datetime(),//生成时间
    income: Mock.Random.integer(0, 9999),//生成随机数
    pay: Mock.Random.integer(0, 9999), //生成随机数
    accoutCash: Mock.Random.integer(0, 9999),//生成随机数
	checked:false//标识当前数据状态
  }))

}
export default{
	getMoneyList:config =>{
		return{
			code:200,
			data:{
				list:List,
			}
		}
	}
}

12.     在 mock里的index.js 里    <1  引入   excel  

     在main.js 里  引入mock 里的index

13导出功能

      <1 在download-excel.vue 文件里的方法;

 methods: {
    getDateFn() {
      getDateList().then((res) => {
        this.tableData = res.data.list;
      });
    },
    handleDownload() {
      this.downloadLoading = true;
      //自定义的头部
      const tHeader = ["姓名", "籍贯", "投资时间", "收入", "支出", "账户现金"];
      //自定义的字段
      const filterVal = [
        "username",
        "address",
        "createTime",
        "income",
        "pay",
        "accoutCash",
      ];
      getDateList().then((res) => {
        if (res.code == 200) {
          const data = this.formatJson(filterVal, res.data.list);
          export_json_to_excel({
            header: tHeader, //excel头部列表
            data, //数据
            filename: "2109_测试文件", //文件名称
            autoWidth: true, //自适应宽
            bookType: "xlsx", //文件类型
          });
          this.downloadLoading = false;
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};

 <2在download-excel.vue  里     引入vendor

声明: 

此处有一部分省略: 大致步骤;

  • 3
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

一染星辰

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值