vue 导出表格 xlsx

① vue2

一、安装xlsx库和file-saver

npm install xlsx

npm install file-saver

二、编写文件位置src/utils/htmlToExcel.js

import FileSaver from "file-saver";
import XLSX from 'xlsx';const htmlToExcel = {getExcel(dom,title="标题") {let excelTitle = titlelet wb = XLSX.utils.table_to_book(document.querySelector(dom))let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array"})try {FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream"}),excelTitle + ".xlsx")}catch(e) {if (typeof console !== "undefined") console.log(e, wbout)}return wbout}
}export default htmlToExcel

三、使用

<template><div><el-button type="primary" style="margin: 20px" @click="handerExcelFn">导出</el-button><el-table :data="tableData" @selection-change="handleSelectionChange"><el-table-column type="selection" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="gender" label="性别" align="center"></el-table-column><el-table-column prop="date" label="时间" align="center"></el-table-column><el-table-column label="详细地址" align="center"><el-table-column prop="province" label="省份" align="center"></el-table-column><el-table-column prop="city" label="市区" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="zip" label="邮编" align="center"></el-table-column></el-table-column><el-table-column fixed="right" label="操作" align="center"><template><el-button type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table><el-dialog title="表格保存预览" width="70%" :visible.sync="selectDialogType"><el-table :data="selectData" id="selectTable" height="380px"><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="gender" label="性别" align="center"></el-table-column><el-table-column prop="date" label="时间" align="center"></el-table-column><el-table-column label="详细地址" align="center"><el-table-column prop="province" label="省份" align="center"></el-table-column><el-table-column prop="city" label="市区" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="zip" label="邮编" align="center"></el-table-column></el-table-column></el-table><div slot="footer" class="dialog-footer"><el-button type="primary" @click="exportExcel">确定保存</el-button></div></el-dialog></div>
</template>
<script>
import htmlToExcel from '../utils/htmlToExcel'
export default {data() {return {tableData: [{name: '小黑',gender:'男',date:'2024-01-01',province: '上海',city: '普陀区',address: '上海市普陀区金沙路 1518 弄',zip: '200333',},{name: '小白',gender:'男',date:'2024-01-01',province: '上海',city: '普陀区',address: '上海市普陀区金沙路 1518 弄',zip: '200333',},{name: '小绿',gender:'男',date:'2024-01-01',province: '上海',city: '普陀区',address: '上海市普陀区金沙路 1518 弄',zip: '200333',},{name: '小蓝',gender:'男',date:'2024-01-01',province: '上海',city: '普陀区',address: '上海市普陀区金沙路 1518 弄',zip: '200333',},{name: '小紫',gender:'男',date:'2024-01-01',province: '上海',city: '普陀区',address: '上海市普陀区金沙路 1518 弄',zip: '200333',},],selectData: [],selectDialogType:false}},methods: {handerExcelFn() {if (this.selectData.length < 1) {this.$message.error('请选择要导出的内容')return false}this.selectDialogType = true},handleSelectionChange(val) {this.selectData = val},exportExcel() {htmlToExcel.getExcel('#selectTable', '表格数据')},},
}
</script>

② vue3

<template><el-row><el-col :span="24"><el-card><el-button style="margin: 20px" type="primary" @click="toExport">导出</el-button><el-table :data="data.tableData" :stripe="true" :border="true"><el-table-column type="index" align="center" /><el-table-column prop="date" label="时间" align="center" /><el-table-column prop="name" label="姓名" align="center" /><el-table-column prop="birthday" label="生日" align="center" /><el-table-column prop="phone" label="手机号" align="center" /><el-table-column prop="mailbox" label="邮箱" align="center" /></el-table></el-card></el-col></el-row>
</template>
<script setup>
import { reactive } from "vue";
const data = reactive({tableData: [{date: "2016-05-03",name: "Tom",birthday: "2000-01-01",phone: "13568925406",mailbox: "2514889516@qq.com",},{date: "2016-05-03",name: "Tom",birthday: "2000-01-01",phone: "13568925406",mailbox: "2514889516@qq.com",},{date: "2016-05-03",name: "Tom",birthday: "2000-01-01",phone: "13568925406",mailbox: "2514889516@qq.com",},{date: "2016-05-03",name: "Tom",birthday: "2000-01-01",phone: "13568925406",mailbox: "2514889516@qq.com",},{date: "2016-05-03",name: "Tom",birthday: "2000-01-01",phone: "13568925406",mailbox: "2514889516@qq.com",},],
});const toExport = () => {// service.question.page().then((res) => {//模拟请求的数据let res = data.tableData;var str = "时间,姓名,生日,手机号,邮箱";for (let i = 0; i < res.length; i++) {let data = res[i];str += "\n";str += data.date + ",";str += data.name + ",";str += data.birthday + ",";str += data.phone + ",";str += data.mailbox + ",";}var blob = new Blob([str], { type: "text/plain;charset=utf-8" });//解决中文乱码问题blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });let object_url = window.URL.createObjectURL(blob);var link = document.createElement("a");link.href = object_url;link.download = "导出用户信息.xls";document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(object_url);// }).catch((err)=>{})
};
</script>

vue 导出表格 xlsx相关推荐

标题vue导出表格数据，excel表格打不开
vue导出表格数据,excel表格打不开代码如下,当时是将**responseType: 'blob'**写在{headers: getHeader() }外面,导致问题一直没解决,后来经过度娘,了 ...
Vue 导出表格为Excel
放法有多种,我这里是直接转JSON数据为Excel. 1.既然要使用,那首先当然是安装依赖,在终端命令输入: npm install -S file-saver xlsx npm install -D ...
xlsx-style使用(导出表格及修改单元格样式)
xlsx-style使用(导出表格及修改单元格样式) 针对导出表格需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式本文对xlsx-style 如何修改单元格样式做了 ...
vue框架使用xlsx导出excel表格
刚接手一个项目,需要做表格导出,之前没用过,特做此记录,以备下次使用.此模板适用于修改表格样式时使用,若只想简单的直接导出,可以参考另一篇:在vue中,使用xlsx配合FileSaver进行导出exc ...
vue 导出excel表格 xlsx文件
1 下载 xlsx 插件 npm install -S file-saver xlsx,npm install -D script-loader , //下载这两个 2.下载Blob.js.Expor ...
XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能
安装依赖 npm install xlsx --save template-用的element <el-upload:file-list="fileList"accept=& ...
【vue开发】vue导出Excel表格教程demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
vue中使用导出表格功能
1.下载依赖 npm install -S file-saver xlsxnpm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Blo ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...

vue 导出表格 xlsx

① vue2

一、安装xlsx库和file-saver

二、编写文件位置src/utils/htmlToExcel.js

② vue3

vue 导出表格 xlsx相关推荐

最新文章

热门文章