① view2
1. Install the xlsx library and file-saver
npm install xlsx
npm install file-saver
2. Write the file location src/utils/htmlToExcel.js
import FileSaver from "file-saver";
import XLSX from 'xlsx';
const htmlToExcel = {
getExcel(dom,title="标题") {
let excelTitle = title
let 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 htmlToExcelThree, use
<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>② view3
<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: "[email protected]",
},
{
date: "2016-05-03",
name: "Tom",
birthday: "2000-01-01",
phone: "13568925406",
mailbox: "[email protected]",
},
{
date: "2016-05-03",
name: "Tom",
birthday: "2000-01-01",
phone: "13568925406",
mailbox: "[email protected]",
},
{
date: "2016-05-03",
name: "Tom",
birthday: "2000-01-01",
phone: "13568925406",
mailbox: "[email protected]",
},
{
date: "2016-05-03",
name: "Tom",
birthday: "2000-01-01",
phone: "13568925406",
mailbox: "[email protected]",
},
],
});
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>