组件化形式实现

1.新建Excel组件

<template><!-- 导出文件 --><div><button @click="handleClick"><slot name="Exceltxt"></slot></button></div>
</template><script>
export default {props: {json: {type: Array,default: []}},data () {return {}},methods: {handleClick () {this.$emit('handleExcel', this.json)}}
}
</script><style></style>

2.封装一个工具类（重点）

首先下载包 npm i xlsx

import * as XLSX from 'xlsx'
export default function download(json, fileName) {const type = 'xlsx' //定义导出文件的格式var tmpDown; //导出的内容var tmpdata = json[0];json.unshift({});var keyMap = []; //获取keysfor (var k in tmpdata) {keyMap.push(k);json[0][k] = k;}var tmpdata = []; //用来保存转换好的json json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {v: v[k],position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {v: v.v});var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10var tmpWB = {SheetNames: ['mySheet'], //保存的表标题Sheets: {'mySheet': Object.assign({},tmpdata, //内容{'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域})}};tmpDown = new Blob([s2ab(XLSX.write(tmpWB, {bookType: (type == undefined ? 'xlsx' : type),bookSST: false,type: 'binary'} //这里的数据是用来定义导出的格式类型))], {type: ""}); //创建二进制对象写入转换好的字节流saveAs(tmpDown, fileName);
}function saveAs(obj, fileName) { //导出功能实现var tmpa = document.createElement("a");tmpa.download = fileName || "下载";tmpa.href = URL.createObjectURL(obj); //绑定a标签tmpa.click(); //模拟点击实现下载setTimeout(function () { //延时释放URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL}, 100);
}function s2ab(s) { //字符串转字符流var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;
}function getCharCol(n) {let temCol = '',s = '',m = 0while (n > 0) {m = n % 26 + 1s = String.fromCharCode(m + 64) + sn = (n - m) / 26}return s
}

3.你的页面里调用这个组件

<template><div><Button @handleExcel="handleExcel":json="datas"><p slot="Exceltxt">导出Excel表格</p></Button></div>
</template><script>
// 模拟数据
let datas = [{name: '路人甲',phone: '123456789',email: '000@123456.com'
}, {name: '炮灰乙',phone: '123456789',email: '000@123456.com'
}, {name: '土匪丙',phone: '123456789',email: '000@123456.com'
}, {name: '流氓丁',phone: '123456789',email: '000@123456.com'
},]
import Button from '../../components/Excel'
import download from '../../utils/Excel'
export default {components: {Button,},data () {return {datas}},methods: {handleExcel (datas) {let json = datas.map(item => { //将json数据的键名更换成导出时需要的键名return {'姓名': item.name,'固定电话': item.phone,'邮箱': item.email}})download(json, '人员信息.xlsx')//导出的文件名},},
}
</script><style></style>

Vue项目-前端实现导出功能相关推荐

尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果二.cssrem 插件 (px -> re ...
在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建一.项目基本结构二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
Vue项目前端或后台实现导出报表
一.后台导出 1.1 使用a链接直接下载 1.2 使用iframe下载 1.3 axios请求后使用blob下载 1.4 方法二: 如果 ...
vue项目中，导出下载Excel表格
方法: // 导出详情数据exportExcel() {const data = {time_type: '',type_id: this.activity_type,activity_id: thi ...
VUE的Excel导入导出功能
在做人力资源管理的后台项目时,实现了excel表的导入导出功能.用到了vue-element-admin提供的框架(链接地址 ),我们只需要在自己的项目中封装改造即可. 项目中实现excel表的导入与 ...
聊一聊如何在 Vue 项目中实现水印功能
作者:熊的猫 https://juejin.cn/post/7132620574198595597 前言由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-water ...

Vue项目-前端实现导出功能

前端实现导出功能

组件化形式实现

1.新建Excel组件

2.封装一个工具类（重点）

3.你的页面里调用这个组件

Vue项目-前端实现导出功能相关推荐

最新文章

热门文章