vue excel上传预览和table内容下载到excel文件中


Posted in Javascript onDecember 10, 2019

excel上传预览

vue excel上传预览和table内容下载到excel文件中

这里会用到

npm i element-ui
npm i xlsx

在vue的template中写上,排版和css看个人需求

<div> 选择文件
 <input type="file" d="file_input" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
</div>
<div @click="fileBtn">上传到服务器</div>
<el-table class="listTable_ele" :data="listTable" stripe height="250" style="width:100%">
 <el-table-column prop="name" label="员工姓名" width="180" align="center"></el-table-column>
 <el-table-column prop="department" label="职务/部门" align="center"></el-table-column>
</el-table>

vue的js中写上

export default {
 data() {
 return {
  listTable: []
   }
 },
 methods:{
 // 上传预览
   importf(obj) {
    let that= this;
    let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
    this.file = event.currentTarget.files[0];
    var rABS = false; //是否将文件读取为二进制字符串
    var f = this.file;
    var reader = new FileReader();
    //if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function(f) {
     var binary = "";
     var rABS = false; //是否将文件读取为二进制字符串
     var pt = this;
     var wb; //读取完成的数据
     var outdata;
     var reader = new FileReader();
     reader.onload = function(e) {
      var bytes = new Uint8Array(reader.result);
      var length = bytes.byteLength;
      for (var i = 0; i < length; i++) {
       binary += String.fromCharCode(bytes[i]);
      }
      var XLSX = require("xlsx");
      if (rABS) {
       wb = XLSX.read(btoa(fixdata(binary)), {
        //手动转化
        type: "base64"
       });
      } else {
       wb = XLSX.read(binary, {
        type: "binary"
       });
      }
      // outdata就是你想要的东西 excel导入的数据
      outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
      // excel 数据再处理
      let arr = [];
      // 这里需要注意名字一定要和excel的内容的文字对上
      outdata.map(v => {
       let obj = {};
       obj.name = v.姓名;
       obj.department = v.部门;
       arr.push(obj);
      });
      // 放入到element的table中显示出来
      that.listTable = arr;
     };
     reader.readAsArrayBuffer(f);
    };
    if (rABS) {
     reader.readAsArrayBuffer(f);
    } else {
     reader.readAsBinaryString(f);
    }
    // 这里补个时间问题,excel的时间格式是序列号,如果用的上需要转化
    // 需要在这个位置加上调用方法
    // outdata.map(v => {
    //  let obj = {};
    //  obj.time= ExcelDateToJSDate(v.时间);
    //  arr.push(obj);
    // });
    // 这个方法暂时是目前找的比较好,日期不是很精确,精确不到秒(暂未查出小时和分钟出问题),excel日期序列号装换成时间格式,
    // function ExcelDateToJSDate(serial) {
    //  let utc_days = Math.floor(serial - 25569);
    //  let utc_value = utc_days * 86400;
    //  let date_info = new Date(utc_value * 1000);
    //  let fractional_day = serial - Math.floor(serial) + 0.0000001;
    //  let total_seconds = Math.floor(86400 * fractional_day);
    //  let seconds = total_seconds % 60;
    //  total_seconds -= seconds;
    //  let hours = Math.floor(total_seconds / (60 * 60));
    //  let minutes = Math.floor(total_seconds / 60) % 60;
    //  let ctime=new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds);
    // 这是时间拼接,需要什么格式可以自行拼接
    //  return (ctime.getFullYear()+'-'+(ctime.getMonth()+1)+'-'+ctime.getDate());
    // }
   },
   // 上传按钮
   fileBtn() {
   //上传这里可以分两种,一种是直接获取input的文件上传给后端,一种是我们已经解析了excel所以只要把listTable数组传给后端
   //两种方法都可行,看自己需求
   }
 }
}

下面是excel上传文件模板

vue excel上传预览和table内容下载到excel文件中

table内容下载到excel文件中

因为方式不一样,需要在安装

npm i file-saver

在vue的script中引入

import XLSX from "xlsx";
import FileSaver from "file-saver";

内容导出,写在vue的methods中

downBtn() {
 // 获取table的dom元素
 let vv = XLSX.utils.table_to_book(document.getElementById("tableExcel"));
 let vbouts = XLSX.write(vv, {
  bookType: "xlsx",
  bookSST: true,
  type: "array"
 });
 try {
  FileSaver.saveAs(
   // 这是下载的excel文件名 
   new Blob([vbouts], { type: "application/octet-stream" }),
   "员工表.xlsx"
  );
 } catch (e) {
  if (typeof console !== "undefined") console.log(e, vbouts);
 }
 return vbouts;
}

总结

以上所述是小编给大家介绍的vue excel上传预览和table内容下载到excel文件中,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 #Javascript
原生js实现随机点餐效果
Dec 10 #Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 #Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 #Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 #Javascript
vue实现随机验证码功能(完整代码)
Dec 10 #Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
jQuery 入门讲解1
2009/04/15 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
解析Python编程中的包结构
2015/10/25 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python实现俄罗斯方块
2018/06/26 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python的logging模块基本用法
2020/12/24 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
个人租房协议书
2014/04/09 职场文书
社区助残日活动总结
2014/08/29 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android