安装

npm install --save xlsx
npm install --save file-saver

file用于保存文件所以也要安装

引入

import XLSX from 'xlsx'
import FileSaver from 'file-saver'
import {ref,reactive,getCurrentInstance,onMounted,} from "vue";

给table加ref属性

我这个表格不需要显示所以加了v-if,需要在页面展示的小伙伴可以自行去掉~

<table id="tabb" border="1" v-show="false" ref="exportTableRef"></table>

获取需要导出的execle表格元素并导出

onMounted(function() {geta()
})
function geta(){//获取表格元素const el =document.getElementById('tabb');el.innerHTML=tab.value;//tab.value是我从后台获取的表格内的数据,// 文件名var datea=new Date();datea=datea.toLocaleString();const filename = '导出兑换码'+datea+'.xlsx';//导出文件的名称,可自行更改/* generate workbook object from table */const wb = XLSX.utils.table_to_book(el)/* 或者用id */// const wb = XLSX.utils.table_to_book(document.getElementById("id"))/* get binary string as output */const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })try {FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)} catch (e) {// console.log(e)}return wbout
}

以上为自己做导出execle功能过程做个记录;如有误欢迎指正
如有雷同纯属巧合,侵删谢谢

vue3.0 execle 导出功能实现相关推荐

[vue] 你期待vue3.0有什么功能或者改进的地方？
[vue] 你期待vue3.0有什么功能或者改进的地方? 用尤大的话说就是各种速度提升n倍.我希望在依赖node_modules能够做出调整,文件数目太多,开启项目每次都要下载个人简介我是歌谣,欢 ...
vue3.0 word导出
vue3.0 word导出安装引入添加点击事件 js部分安装 npm install --save file-saver 用于保存文件引入 import FileSaver from 'fi ...
vue3.0 抽奖小功能
vue3.0 抽奖小功能我给写进组件了 <template><div id="toll"><div class="lottery-box ...
前端学习（2671）： vue3.0脚手架获取功能页面布局
Vue3.0快速入门
一.安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm ins ...
【Vue3.0实战逐步深入系列】为问卷系统重新布局并添加登录及注销功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言小伙伴们大家好.到目前为止我们的问卷调查已经实现了配置问卷,填写问卷,保存问卷,提交问卷,提交记录以及提交结果展示等基本功能.其实到这里关于 ...
Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ...
富文本功能实现vue3.0
富文本功能实现vue3.0 安装引入创建div 创建button按钮 js部分安装 npm i wangeditor --save 引入 import WangEditor from " ...
vue3.0导出excel带格式
这个真的困扰了我整整一天,我尝试了xlxs file-saver两个组件的版本,怎么搞都不行先不说vue3.0 不能import进来,只能require('xlxs'),require('file- ...

vue3.0 execle 导出功能实现

vue3.0 execle 导出功能实现

安装

引入

给table加ref属性

获取需要导出的execle表格元素并导出

vue3.0 execle 导出功能实现相关推荐

最新文章

热门文章