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 = 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 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>