zoukankan      html  css  js  c++  java
  • VUE纯前端导出Excel表格

    1、需要安装三个依赖:

                 npm install -S file-saver xlsx

                 npm install -D script-loader

    2,下载两个必要的JS  Blob.js   /    Export2Excel.js    然后在SRC文件夹下新建一个excel文件夹 放入 这两个JS文件

      

    3,在main.js 里面  引入这两个文件模块

    import Blob from './Excel/Blob.js'
    import Export2Excel from './Excel/Export2Excel.js'
     
    4,最后在你需要的组件里面  写导出功能    ,需要注意 文件夹的大小写 ,与你导入的文件大小写 保持一致  就没有警告
    HTML
     <div class="export" @click="outTab">导出当前</div>
    JS
     outTab() {
          require
            .ensure([], () => {
              const { export_json_to_excel } = require("@/Excel/Export2Excel"); //注意这个Export2Excel路径  
              const tHeader = [
                "序号",
                "项目名称",
                "方案编号",
                "项目类型",
                "任务类型",
                "任务发布时间",
                "待审查任务",
              ]; // 上面设置Excel的表格第一行的标题
              const filterVal = [
                "id",
                "projectName",
                "schemeNo",
                "projectType",
                "taskStyle",
                "startTime",
                "taskStatus",
              ]; // 上面的index、nickName、name是tableData里对象的属性key值

              const list = this.tableData; //把要导出的数据tableData存到list   这个数组不能为空

              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "列表excel"); //最后一个是表名字
            })
      //这里如果 有map报错的话 就加 没有就不加   这边是利用map的遍历 来建Excel表
            .catch((err) => {
              console.log(66666);
            });
        },
        //格式转换,不需要改动
        formatJson(filterVal, jsonData) {
          console.log(jsonData);
          return jsonData.map((v) => filterVal.map((j) => v[j]));
        },

       

  • 相关阅读:
    20170930-构建之法:现代软件工程-阅读笔记
    结对-四则运算答题器-开发过程
    小米3Android开发学习笔记三
    小米3Android开发学习笔记二
    小米3Android开发学习笔记一
    maya学习之晶格变形
    只说说C++内联函数
    Flash 文件加载方案以及一些问题及解决(1)
    博客内容笔记
    Unity里关于[HideInInspector]23事
  • 原文地址:https://www.cnblogs.com/shenbo666/p/13639552.html
Copyright © 2011-2022 走看看