1.vue导入Excel表格（input文件上传）

需要xlsx库，没下载插件的小伙伴记得先下载！

注意！本文章xlsx版本为 0.16.9

import { read, utils } from "xlsx";

完整代码如下

  <div>
    <div class="left-box">文件上传</div>
    <input type="file" @change="onChange" class="file-ipt" />
    <table>
      <thead>
        <tr>
          <th v-for="headItem in tableHead" :key="headItem">{{ headItem }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="rowData in tableData" :key="rowData.id">
          <td v-for="cellData in rowData" :key="cellData">{{ cellData }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { read, utils } from "xlsx"; // 引入xlsx库

export default {
  data() {
    return {
      tableHead: [], // 表头
      tableData: [], // 表数据
    };
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();  // fileReader用于读取文件内容
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;  //获取文件的二进制数据
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取对应表生成json表格内容
          workbook.SheetNames.forEach((sheetName) => {
            const jsonData = utils.sheet_to_json(workbook.Sheets[sheetName]);
            params.push({
              name: sheetName,
              dataList: jsonData,
            });
            console.log(jsonData,'json');
          });
          if (params.length > 0) {
            const firstSheetData = params[0].dataList;
            this.tableData = firstSheetData.map((rowData, index) => ({
              ...rowData,
              id: index + 1, // 使用唯一标识符作为键值
            }));
            this.tableHead = Object.keys(firstSheetData[0]);
          }
        } catch (e) {
          console.log("Error:", e);
        }
      };
      fileReader.readAsBinaryString(file);
    },
  },
};
</script>

<style>
  /* 样式可以根据您的需求进行调整 */
  .left-box {
    margin-bottom: 10px;
  }
  .file-ipt {
    margin-bottom: 20px;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border: 1px solid #ccc;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
</style>

2.vue导出Excel表格

方法一:下载依赖： cnpm install vue-json-excel -S

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
在main.js中引入ui组件
cnpm install element-ui -S
//引入UI库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
在页面中使用插件：
<download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="title"
name="表格名字.xls">
<!-- 上面可以自定义样式，也可以引用其他组件button -->
<el-button type="success">导出</el-button>
</download-excel>
添加data数据
data() {
return {
 title: "xxxxx表格",
json_fields: {
"序号": 'num',
"姓名": 'name',
"年龄": 'age',
"爱好": 'like',
"毕业时间": 'graduationTime',
"所学专业": 'specialized',
"毕业学校": 'graduationSchool',
"身份证号": 'idnum'
},
DetailsForm: [
{
num: "1",
name: "张三",
age: "20",
like: "唱跳rap",
graduationTime: "2023-06-06",
specialized: "计算机科学与技术",
graduationSchool: "xxx理工大学",
idnum: "111111222233334455"
},
{
num: "1",
name: "张三",
age: "20",
like: "唱跳rap",
 graduationTime: "2023-06-06",
specialized: "计算机科学与技术",
graduationSchool: "xxx理工大学",
idnum: "111111222233334455"
},
{
num: "1",
name: "张三",
age: "20",
like: "唱跳rap",
graduationTime: "2023-06-06",
specialized: "计算机科学与技术",
graduationSchool: "xxx理工大学",
idnum: "111111222233334455"
},
{
num: "1",
name: "张三",
age: "20",
like: "唱跳rap",
graduationTime: "2023-06-06",
specialized: "计算机科学与技术",
graduationSchool: "xxx理工大学",
idnum: "111111222233334455"
},
{
num: "1",
 name: "张三",
age: "20",
like: "唱跳rap",
graduationTime: "2023-06-06",
specialized: "计算机科学与技术",
graduationSchool: "xxx理工大学",
idnum: "111111222233334455"
},
]
}
}

方法二： 下载依赖并引入： cnpm install file-saver -S cnpm install xlsx -S

页面中引入：
import FileSaver from "file-saver";
import XLSX from "xlsx";
引入页面结构：
<template>
<div>
<!--导出按钮-->
<el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
<!--原始表格-->
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection">
</el-table-column>
 <el-table-column prop="date" label="日期">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column label="详细地址">
<el-table-column prop="province" label="省份">
</el-table-column>
<el-table-column prop="city" label="市区">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="email" label="邮编">
</el-table-column>
</el-table-column>
<el-table-column fixed="right" label="操作">
<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="selectWindow">
<el-table :data="selectData" id="selectTable" height="380px">
<el-table-column prop="date" label="日期">
</el-table-column>
<el-table-column prop="name" label="姓名">
 </el-table-column>
<el-table-column label="详细地址">
<el-table-column prop="province" label="省份">
</el-table-column>
<el-table-column prop="city" label="市区">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="email" label="邮编">
</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>
引入数据方法：
data() {
return {
//表格数据
tableData: [
{
date: '2023-03-31',
name: '表格导出',
province: '北京',
 city: '朝阳区',
address: '北京市朝阳区红海路123号',
email: 123456
}, {
date: '2023-03-31',
name: '表格导出',
province: '北京',
city: '朝阳区',
address: '北京市朝阳区红海路123号',
email: 123456
}, {
date: '2023-03-31',
name: '表格导出',
province: '北京',
city: '朝阳区',
address: '北京市朝阳区红海路123号',
email: 123456
}, {
date: '2023-03-31',
name: '表格导出',
province: '北京',
city: '朝阳区',
address: '北京市朝阳区红海路123号',
email: 123456
}, {
date: '2023-03-31',
name: '表格导出',
 province: '北京',
city: '朝阳区',
address: '北京市朝阳区红海路123号',
email: 123456
}, {
date: '2023-03-31',
name: '表格导出',
province: '北京',
city: '朝阳区',
address: '北京市朝阳区红海路123号',
email: 123456
}, {
date: '2023-03-31',
name: '表格导出',
province: '北京',
city: '朝阳区',
address: '北京市朝阳区红海路123号',
email: 123456
}
],
//表格中选中的数据
selectData: [],
selectWindow: false,
}
},
methods: {
//格式化数据
 getExcel(dom, title = '默认标题',) {
var excelTitle = title;
var wb = XLSX.utils.table_to_book(document.querySelector(dom));
/* 获取二进制字符串作为输出 */
var 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;
},
//导出
exportExcel() {
this.getExcel('#selectTable', '导出的自定义标题')
},
//显示预览弹窗
exportExcelSelect() {
if (this.selectData.length < 1) {
this.$message.error('请选择要导出的内容！');
return false;
}
this.selectWindow = true;
},
 //选中数据
handleSelectionChange(val) {
this.selectData = val;
},
}```