首页 > 其他分享 >【Vue项目实践】(vue3 + Element Plus)excel 导出

【Vue项目实践】(vue3 + Element Plus)excel 导出

时间:2022-09-29 19:34:13浏览次数:58  
标签:wbout xlsx Vue 表格 XLSX 导出 excel Element table

安装依赖

yarn add --save xlsx file-saver
1、添加导出按钮以及点击事件
<el-button type="primary" round @click="exportClick ">导出表格</el-button>
2、在table表格中添加id
<el-table :data="tableData" style="width: 100%" id="myTable">
3、写点击事件的方法函数
const exportClick = () => {
var wb = XLSX.utils.table_to_book(document.querySelector('#my-table'));//关联dom节点
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs(new Blob([wbout], {
type: 'application/octet-stream'
}), '工资表.xlsx')//自定义文件名
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout);
}
return wbout
};

参考博客:
​基于Element Plus 表格导入和导出excle文件

作者:panie



标签:wbout,xlsx,Vue,表格,XLSX,导出,excel,Element,table
From: https://blog.51cto.com/u_15812342/5723966

相关文章

  • vue3 pc端页面全屏
    先看效果图: 附上代码: <template><el-button@click="hand">{{fullscreen?'取消全屏':'点击全屏'}}</el-button></template><script>import{ref}......
  • mac解决~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual m
    mac在使用vue-cli创建项目的时候,会出现这个错误 ERROR ~/.vuercmaybeoutdated.Pleasedeleteitandre-runvue-cliinmanualmode.   这是在~/下面有一个......
  • vue引入图片的方式
    一、img标签1、静态引入(静态路径加载)相对路径<imgclass="pic-404__childleft"src="../../assets/404_images/404_cloud.png"alt="404">绝对路径<imgclass......
  • Vue 超长列表渲染性能优化
    参考:https://juejin.cn/post/6979865534166728711#heading-3组件懒加载参考:https://github.com/xunleif2e/vue-lazy-component......
  • Ant Design Vue 在表格中插入图片
    这两天一直在用Antdv做一些小demo,今天在做表格的时候想在表格中插入图片,简单翻了下文档和国内的博客,发现所有的方法竟然都不好使,最后还是在官网的示例代码中看到相关的......
  • vue3 在setup 使用provide inject 实现响应式传值
    provide与inject主要用于从父组件向子组件传递数据。在2.0我们通常用props接收来自父组件的参数,但是一个要从父子组件传递到孙子组件,这种情况就得从父组件到子组件,再从子......
  • vue生成二维码功能
    生成二维码听起来很难,其实也很简单,我这里是用vant-ui来完成的首先需要给一个DOM添加一个点击触发事件然后在vant-ui框架找到合适的组件注意:这里的@click.stop去掉就......
  • NET5+JWT+VUE+Swagger登录权限验证2——跨域Cors
    在ConfigureServices添加如下代码://注册cros--->跨域services.AddCors(option=>{option.AddPolicy("any",build=>......
  • NET5+JWT+VUE+Swagger登录权限验证3——JWT权限认证1
    注册://配置认证服务services.AddAuthentication(x=>{x.DefaultAuthenticateScheme=JwtBearerDefaults.AuthenticationScheme......
  • vue3 Element Plus Icon 图标使用
    1. 没有安装element-plus/icons的,安装命令如下:npminstall@element-plus/icons-vue2. main.js引入(我比较懒,全部引入。): import{createApp}from'vue'im......