安装依赖

npm install xlsx --save

template-用的element

          <el-upload:file-list="fileList"accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"class="btn":auto-upload="false":show-file-list="false":limit="1":on-change="uploadfile">导入</el-upload>

导入表格

接受el-input传过来的文件流，使用xlsx读取内容

    uploadfile(file) {console.log("上传的文件", file);let _this = this;let f = file.raw;let rABS = false; //是否将文件读取为二进制字符串let reader = new FileReader();//if (!FileReader.prototype.readAsBinaryString) {FileReader.prototype.readAsBinaryString = function (f) {let binary = "";let rABS = false; //是否将文件读取为二进制字符串let wb; //读取完成的数据let outdata;let reader = new FileReader();reader.onload = function (e) {let bytes = new Uint8Array(reader.result);let length = bytes.byteLength;for (let i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}let XLSX = require("xlsx");if (rABS) {wb = XLSX.read(btoa(fixdata(binary)), {//手动转化type: "base64",});} else {wb = XLSX.read(binary, {type: "binary",});}outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西const keyObj = {序号: "id",情况跟踪: "track",日期: "date",标题: "title",状态: "status",结果: "result",预警: "warning",};outdata.forEach((item) => {// 将中文的键名替换成英文的for (let k in keyObj) {let newKey = keyObj[k];if (newKey) {item[newKey] = item[k];delete item[k];}}});console.log(outdata);};reader.readAsArrayBuffer(f);};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}},

上传的文件

读取结果

导出文件

创建exportExcel.js

/* eslint-disable */
/* 导出excel文件 *//*** 导出excel文件实现思路分析** 1.通过XLSX插件的 XLSX.utils.book_new()方法，创建excel工作蒲对象wb。* 2.按需插入第一行数据，通过数组的unshift()方法。* 3.通过XLSX.utils.json_to_sheet(),创建excel表格对象ws。* 4.通过json_to_array(key，data),结合自定义的字段名key，和数据记录data，生成新数组。* 5.通过auto_width(),对ws和新生成的数组，自动计算各列col宽。* 6.通过XLSX.utils.book_append_sheet(),生成实际excel工作蒲，并使用XLSX.writeFile()生成excel文件。*/import XLSX from 'xlsx'// 自动计算col列宽
function auto_width (ws, data) {/*set worksheet max width per col*/const colWidth = data.map(row => row.map(val => {/*if null/undefined*/if (val == null) {return { 'wch': 10 }}/*if chinese*/else if (val.toString().charCodeAt(0) > 255) {return { 'wch': val.toString().length * 2 }} else {return { 'wch': val.toString().length }}}))/*start in the first row*/let result = colWidth[0]for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]['wch'] < colWidth[i][j]['wch']) {result[j]['wch'] = colWidth[i][j]['wch']}}}ws['!cols'] = result
}// 将json数据转换成数组
function json_to_array (key, jsonData) {return jsonData.map(v => key.map(j => {return v[j]}))
}/*** @param header Object，表头* @param data Array，表体数据* @param key Array，字段名* @param title String，标题（会居中显示），即excel表格第一行* @param filename String，文件名* @param autoWidth Boolean，是否自动根据key自定义列宽度*/
export const exportJsonToExcel = ({header,data,key,title,filename,autoWidth
}) => {const wb = XLSX.utils.book_new()if (header) {data.unshift(header)}if (title) {data.unshift(title)}const ws = XLSX.utils.json_to_sheet(data, {header: key,skipHeader: true})if (autoWidth) {const arr = json_to_array(key, data)auto_width(ws, arr)}XLSX.utils.book_append_sheet(wb, ws, filename)XLSX.writeFile(wb, filename + '.xlsx')
}
export default {exportJsonToExcel
}

在页面引入这个js,传递要导出的数据

import exportExcel from "../../components/exportExcel.js"

    beforeExport(arr) {// 导出表格if(arr && arr.length>0){let data = JSON.parse(JSON.stringify(arr));console.log(data)this.loading=true;let title ={}let key =[]//循环字段，这段看自己的表单需要哪些字段this.keys.forEach((item)=>{if(item.key){key.push(item.key);}title[item.key]=item.title})let obj ={header:title,data:data,key:key,title:"",filename:"事项清单",autoWidth:true}exportExcel.exportJsonToExcel(obj);this.loading=false;}},

下载模板

用的vue3,把模板放在可以被调用静态资源的文件夹中，我放在了public/static/file下

使用a标签,写上路径＆download属性，就可以了，这里的路径是相对于public的index.html写的

          <a class="btn" href="./static/file/temp.xls" download="temp.xls"><Download class="addarea" />//图标来的下载</a>

XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能相关推荐

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板导入数据生成表格(自适应) 最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模 ...
easypoi 模板导入、导出合并excel单元格功能
easypoi 模板导入.导出合并单元格功能参考: hutool 导出复杂excel(动态合并行和列) java使用poi读取跨行跨列excel springboot集成easypoi并使用其模板导 ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
java poi word 复制_Java 使用POI填充Word表格内容和复制模板行属性方法示例代码
1､填充Word表格内容/** * 循环填充表格内容 * @param xwpfDocument * @param params * @param tableIndex * @throws Excep ...
JAVA （ EasyExcel 通过模板导入、导出、下载模板）——亲测有用
本文参考:https://liuyanzhao.com/10060.html 先说两个实体类对象. 我这里举例 Student 和 StudentExcel Student 就是你数据库表的对象 St ...
使用EasyExcel实现模板下载、导入和导出功能
最近项目中需要用到Excel表格的上传下载功能,于是选择了EasyExcel这款工具,总的来说非常的好用,下面就做一个简单的演示. 官方文档地址 https://www.yuque.com/easye ...
java获取excle表格对象_Java使用excel工具类导出对象功能示例
本文实例讲述了Java使用excel工具类导出对象功能.分享给大家供大家参考,具体如下: package com.gcloud.common; import org.apache.poi.ss.use ...
基于PyQt5的快速开发模板系统-Excle数据批量导入及导出表格数据为Excle
基于Python和PyQt5的快速开发模板系统-Excle数据批量导入显示及表格数据导出基于PyQt5按钮控制实现excle数据批量导入及当前表格存在数据的批量导出,可在此基础上进行功能扩展. 1. ...
【xlsx+vue】前端生成可下载的xlsx表格
组件引入: <script type="text/javascript" src="./xlsx.core.min.js"></script ...

XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能

安装依赖

template-用的element

导入表格

上传的文件

读取结果

导出文件

创建exportExcel.js

在页面引入这个js,传递要导出的数据

下载模板

XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能相关推荐

最新文章

热门文章