重写input样式

首先我们先来重写input的原生样式，毕竟实在不好看。这里的思路很简单input外面套一层div然后让input撑满盒子然后给input隐藏了就行

<div class="bg-[#f8f8f8]  w-[430px] h-[220px] rounded-md cursor-pointer relative outline-0">
  <input type="file" @change="file_upload"
    class=" absolute z-10 opacity-0 block w-full cursor-pointer h-full outline-0 ">
  <div class="absolute inset-0 ">
    <div class="flex h-full flex-col justify-center items-center  leading-[3]">
      <div class="">
        <t-icon name="cloud-upload" size="40px"></t-icon>
      </div>
      <div class="text-[#616161]">
        请将文件拖拽此处，或点击上传
      </div>
      <div class="text-[#9a9a9a]">
        仅支持CSV、XLSX、XLS文件，单文件大小限制在5M以内
      </div>
    </div>
  </div>
</div>

下面是写好的效果

导入功能

首先下载xlsx

npm install -S xlsx

在需要使用的vue文件中引入

import * as XLSX from 'xlsx' // Vue3 版本

因为我们只需要上传xlsx和xls文件，所有我们要做上传之前的校验

// 文件上传
const file_upload = (e: any) => {

  // 校验文件类型
  const file = e.target.files[0]
  const { name, size } = file

  const m5 = size / 1024 / 1024
  if (m5 > 5) {
    MessagePlugin.error("上传文件不能超过，5M")
    return
  }

  const is_type = name.indexOf(".xls") != -1 || name.indexOf(".xlsx") != -1

  if (!is_type) {
    MessagePlugin.error("上传文件必须是，.xls和.xlsx文件")
    return
  }


  file_import(file)		// 调用导入方法
}

下面就是导入的逻辑

const file_import = (file: File) => {
  // 创建一个新的 'FileReader' 实例
  const read_file = new FileReader();

  // 定义文件加载完成时的事件处理函数
  read_file.onload = (e: any) => {
    // 将加载的文件数据转换为 Uint8Array
    const data = new Uint8Array(e.target.result);

    // 使用 XLSX 库读取加载的数据，将其视为数组
    const work = XLSX.read(data, { type: "array" });

    // 获取 Excel 工作簿中第一个工作表的名称
    const sheet_name = work.SheetNames[0];

    // 使用工作表名称访问第一个工作表的数据
    const sheet_data = work.Sheets[sheet_name];

    // 将工作表数据转换为 JSON 对象（对象数组）
    const table = XLSX.utils.sheet_to_json(sheet_data);

    // 将生成的 JSON 数据（表格）记录到控制台
    console.log(table);
  };

  // 以 ArrayBuffer 格式读取文件内容
  read_file.readAsArrayBuffer(file);
};

下面是导出的逻辑

首先先看html结构

<div  @click="file_export" class="text-[#56c206] my-5 flex flex-col cursor-pointer justify-center  items-center p-3 border w-fit border-[#56c206] rounded-md">
        <div class="text-center">
          <t-icon name="arrow-down-rectangle" size="35px"></t-icon>
        </div>
        <div class=" ">下载模板</div>
</div>

然后是数据结构，如果需求换成动态的就行

const table = [
  {
    '第三方订单号 没有可留空': "123456",
    '收件人姓名 必填': "张三",
    '联系电话 必填': "1300000000",
    '收货人详细地址 必填': "河北省石家庄市康美丽街道01号"
  },
]

然后是ts部分

const file_export = () => {
  // 创建工作簿
  const workbook = XLSX.utils.book_new();
  // 创建工作表
  const worksheet = XLSX.utils.json_to_sheet(table);
  // 设置表格宽度
  worksheet['!cols'] = [
    { wch: 25 },
    { wch: 25 },
    { wch: 25 },
    { wch: 40 }
  ];


  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');


  // 生成 Blob 对象
  const blob = new Blob([XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  });
  // 创建下载链接
  const url = URL.createObjectURL(blob);
  // 创建一个虚拟链接并模拟点击以下载文件
  const link = document.createElement('a');
  link.href = url;
  link.download = 'exported_data.xlsx';
  link.click();
  // 释放链接
  URL.revokeObjectURL(url);
}