Vue3-导出excel表格

简介: 安装xlsx和file-saver

安装xlsx和file-saver

yarn add file-saver xlsx
//或
npm install file-saver -S
npm install xlsx -S

页面引入xlsx和file-saver

import * as XLSX from "xlsx";
import FileSaver from 'file-saver'

导出函数

//参数dom表示传入的表格dom节点,title表示导出的excel文件名称
const exData = (dom, title) => {
    let wb = XLSX.utils.table_to_book(dom, { raw: true })
    let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title + `.xlsx`)
    } catch (e) {
        if (typeof console !== 'undefined') {
            console.log(e, wbout)
        }
    }
    return wbout
}

调用

exData(document.querySelector('#table'), '薪资表');
相关文章
|
1天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
10 0
|
1天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
8 0
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
7 1
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
5 0
|
1天前
|
JavaScript 前端开发 API
Vue3 系列:从0开始学习vue3.0
Vue3 系列:从0开始学习vue3.0
8 1
|
1天前
|
网络架构
Vue3 系列:vue-router
Vue3 系列:vue-router
6 2
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1