vue实现下载excel模板、导入excel文件、导出excel文件

顾鸟

已于 2022-05-24 20:16:16 修改

阅读量1.3w

点赞数 18

分类专栏： vue js 文章标签： vue.js javascript 前端

于 2021-02-07 18:01:09 首次发布

本文链接：https://blog.csdn.net/qq_40881695/article/details/113743676

版权

vue 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

1. 下载excel模板

在public目录下存放excel模板文件,我这里放的是excelTemplate.xls这个文件

html部分

// 下载模板
<el-button size="medium"
        class="xxx"
        @click="downloadTemplate"
        >模 板</el-button>
<!-- 下载模板a标签 -->
<a ref="downloadTemplate" style="display: none" href="./excelTemplate.xls"></a>

js部分

methods: {
// 点击模板按钮触发a下载文件
    downloadTemplate(){
      this.$refs.downloadTemplate.dispatchEvent(new MouseEvent('click')) 
    },
 }

导入excel文件

安装依赖

npm install -S  xlsx

html部分

<!-- 导入 -->
<el-button size="medium"
          class="xxx"
          @click="importExcel"
          >导 入</el-button>
<!-- 导入文件input框 -->
<input type="file" ref="upload" accept=".xls, .xlsx" style="display: none;" />

js部分

import XLSX from "xlsx";
export default {
data () {
    return {
    onDutyList: [], // 保存导入的excel表格数据
    orgPath: null, // 组织路径
    }
 }
	mounted() {
	    //绑定监听表格导入事件
	    this.$refs.upload.addEventListener("change", e => {
	      this.readExcel(e);
	    });
	  },
	methods: {
	 // 点击导入按钮触发input上传文件
	    importExcel(){
	      // 通过dispatchEvent触发点击事件
	      this.$refs.upload.dispatchEvent(new MouseEvent('click')) 
	    },
	     //表格导入
	     readExcel(e) {
	      var that = this;
	      const files = e.target.files;
	      // 判断是否导入文件或者导入文件的格式是否正确
	      if (files.length <= 0) {
	        //如果没有文件名
	        return false;
	      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
	        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
	        return false;
	      }
	      const fileReader = new FileReader();
	      fileReader.onload = ev => {
	        try {
	          const data = ev.target.result;
	          const workbook = XLSX.read(data, {
	            type: "binary"
	          });
	          const wsname = workbook.SheetNames[0]; //取第一张表
	          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
	          // console.log(ws, 111111111);
	          that.onDutyList = []; //清空接收数据，把导入的excel数据转化成json格式存储到data中
	          //编辑数据
	          for (var i = 0; i < ws.length; i++) {
	            var sheetData = {
	              // 使用day.js把日期转化为时间戳
	              // 这里配置导入excel表的数据格式
	              dutyTime: this.$dayjs(ws[i]["日期"]).unix(),
	              dutyChief: ws[i]["test2"],
	              forefingerChief: ws[i]["test3"],
	              dutyDirector: ws[i]["test4"],
	              commandControlSeat: ws[i]["test5"],
	              warReadinessSupervisor: ws[i]["test6"],
	              politicalWorkSeat: ws[i]["test7"],
	              informationCommunicationSeat: ws[i]["test8"],
	              intelligenceReconnaissanceSeat: ws[i]["test9"],
	              backpackProtectionSeat: ws[i]["test10"],
	              technicalSupportSeat: ws[i]["test11"]
	            };
	            that.onDutyList.push(sheetData);
	          }
	          // 清空上传input
	          this.$refs.upload.value = "";
	        } catch (e) {
	          return false;
	        }
	      };
	      fileReader.readAsBinaryString(files[0]);
	      // 获取orgPath
	      this.getOrgPath()
	    },
	    // 通过当前用户获取组织orgPath
	    // 这个函数里面的代码,根据个人需求,可以不要
	    async getOrgPath(){
	      const userID = window.sessionStorage.getItem('userID')
	      const {data} = await get (`/api/xxx/users/${userID}/details`)
	      this.orgPath = data.userDetails[0].orgPath
	      this.orgName = data.userDetails[0].orgName
	      if(this.orgPath.length === 2 ){
	        this.orgPath = this.orgPath.substring(0,1)
	      }
	      if(this.orgPath.length > 2 ){
	        this.orgPath = this.orgPath.substring(2,3)
	      }
	      // 把orgPath添加到onDutyList的子项中
	      this.onDutyList.forEach(v => {
	        v.orgID = parseInt(this.orgPath)
	        v.orgName = this.orgName
	      })
	      // 向后端添加导入的excel数据
	      this.addMaryDutyData()
	    },
	    // 向后端添加导入的excel数据
	    async addMaryDutyData(){
	      const {data} = await post(`/api/on-duty-reports`, {
	        'onDutyList': this.onDutyList
	      })
	      if(data.errCode === 200){
	        this.$message.success("添加成功!")
	      }else{
	        this.$message.error("添加失败!")
	      }
	      // 更新表格数据, 这个方法是刷新表格数据的函数
	      this.getTableData()
	    },
	}
}

导出excel文件

方法一:

使用file-saver+xlsx导出excel文件,但这样导出的结果是根据div中的内容导出,例如,表格中有操作这一列,导出的结果也会有操作这一列

1、安装：

npm install file-saver xlsx --save-dev

2、引入：

import FileSaver from 'file-save';　
import XLSX from 'xlsx';

3、点击事件：

exportExcel() {
// 这里的outTable是需要导出的表格,选择对应id
　　　let vb = XLSX.utils.table_to_book(document.getElementById('outTable'));
		   let vbout = XLSX.write(vb, {bookType: 'xlsx', bookSST: true, type: 'array'});
　　　try {
　　　		FileSaver.saveAs(new Blob([vbout], {type: 'application/octet-stream'}), 'sheetjs.xlsx');
　　　} catch (e) {
　　　		if (typeof console !== 'undefined') console.log(e, vbout);
　　　}
　　　return vbout;
}

方法二:

使用Blob.js文件+Export2Excel.js文件+xlsx插件导出excel文件,这种方式可以自定义导出字段

链接:https://pan.baidu.com/s/1NajDSjBl7FC4SagaipOtqA 密码:ryab
下载Blob.js和Export2Excel.js，在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
找到Export2Excel.js，把require(‘script-loader!vendor/Blob’)改为 require(’./Blob.js’)
html部分

<el-button size="medium"
       class="xxx"
        @click="exportExcel"
        >导出值班执勤表</el-button>

js部分

methods: {
 //表格导出
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../../../excel/Export2Excel");
        const tHeader = ["日期", "test1", "test2", 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'test9', 'test10'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ["dutyTime", "dutyChief", "forefingerChief",'dutyDirector','commandControlSeat','warReadinessSupervisor','informationCommunicationSeat','politicalWorkSeat','intelligenceReconnaissanceSeat','backpackProtectionSeat','technicalSupportSeat'];
        // 上面的index、nickName、name是tableData里对象的属性
        // 把时间戳转化为年-月-日
        // 深拷贝对象
        let newTableData=JSON.parse(JSON.stringify(this.tableData));
        newTableData.forEach(v => {
          const formatDate = this.$dayjs.unix(v.dutyTime).format('YYYY-MM-DD')
          v.dutyTime = formatDate
        })
        const list = newTableData; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "值班执勤表");
      });
      // 这个方法是刷新表格数据的函数
      this.getTableData()
    },
    // 表格导出用到的方法
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
}