element-ui 导出excel

邹强发布于2019-08-23 13:44 / 2003人阅读

摘要：导出项目简介插件使用保存文件电子表格解析器安装使用以示例给定引入插件新增方法错误处理方式新增点击事件浏览器会下载问题导出时间格式转换解决方案

element-ui 导出excel 项目简介

vue + elementUi

插件使用

Project	Description
file-saver	保存文件
xlsx	电子表格解析器

安装

    npm install file-saver xlsx --save 
    or 
    yarn add file-saver xlsx

使用(以el-table示例)

// table给定id


// 引入插件
import fileSaver from "file-saver"
import xlsx from "xlsx"

// methods新增方法 exportTable
exportTable(){
 let box = xlsx.utils.table_to_book(document.querySelector("#table-data"))
 let out = xlsx.write(box, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      })
 try {
  fileSaver.saveAs(
    new Blob([out], {
      type: "application/octet-stream"
    }),
    "sheet.xlsx"
  )
 } catch (e) {
   // 错误处理方式
 }
 return out
}


// 新增点击事件（exportTable） 浏览器会下载excel

问题

导出时间格式转换

解决方案:

let xlsxParam = { raw: true };

let wb = xlsx.utils.table_to_book(dom, xlsxParam)

海外云主机私有云 excel表格导出 excel导出出错 excel导出乱码 excel导入导出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99472.html

element-ui上传下载excel（超详细der）

摘要：上传组件点击跳转到该组件官方文档用到的组件参数参数说明类型可选默认值必选参数，上传的地址上传的文件列表接受上传的文件类型覆盖默认的上传行为最大允许上传个数文件超出个数限制时的钩子 1. 上传 EXCEL Upload组件点击跳转到该组件官方文档用到的upload组件参数参数说明类型可选默认值 action 必选参数，上传的地址 string --- --...

Jeffrrey 2019-08-23 15:10 评论0 收藏0
基于Vue+element-ui 的Table二次封装

摘要：本人第一次写这个写的不好还望指出来作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员公司做的数据管理系统所以离不开表格了然后表格样式统一啥的就想到封装一个里面的了效果图表格组件的引入与使用监测数据表格本人第一次写这个写的不好还望指出来作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员！公司做的数据管理系统所以离不开表格了然后表格样式统一啥...

you_De 2019-08-22 18:43 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
Vue2 导出excel

摘要：今天在开发的过程中需要做一个的导出功能。如果需要导出分页数据这样的需求是没法满足的。需要后台生成一个文件链接，然后点击下载。今天在开发的过程中需要做一个Vue的导出功能。老司机开车使用 js-xlsx 里面有vue的部分可以参考废话不多说了，直接贴代码一、在index.html中引用js文件 showImg(https://segmentfault.com/img/bVSsSR?w...

NotFound 2019-08-20 18:36 评论0 收藏0