页面整体

导出:

导出的模板带有公式可以自动计算金额 导出也可以选择字段的顺序每格的大小（还支持自定义CSS样式但我没用）

导入 修改过后将表格导入

下面具体代码

先下载 slsx

// An highlighted block
npm install xlsx
import * as XLSX from 'xlsx'; // Vue3 版本 页面引入

具体使用 由于接口返回的字段名是英文导出到表格里想展示中文所以得转换一下

//导出 把英文表头转成中文
let Lists = [];
    List.value.Goods.map((item) => {
      let obj = {};
      if (item.FID != 0) {
        Object.keys(item).map((key, i) => {
          let newKey;
          switch (key) {
            case 'FName':
              newKey = '商品名称';
              obj[newKey] = item[key];
              break;
            case 'FSeriesName':
              newKey = '商品系列';
              obj[newKey] = item[key];
              break;
            case 'FNumber':
              newKey = '商品编码';
              obj[newKey] = item[key];
              break;
            case 'FBarCode':
              newKey = '条码';
              obj[newKey] = item[key];
              break;
            case 'FSpec':
              newKey = '规格型号';
              obj[newKey] = item[key];
              break;
            case 'FSalePrice':
              newKey = '单价/箱';
              obj[newKey] = item[key];
              break;
            case 'FQtyAvailable':
              newKey = '库存数量';
              obj[newKey] = item[key];
              break;
            case 'FBatchNo':
              newKey = '批次号';
              obj[newKey] = item[key];
              break;
            case 'FSuggestQty':
              newKey = '建议数量';
              obj[newKey] = item[key];
              break;
            case 'FBalanceQty':
              newKey = '货款数量';
              obj[newKey] = item[key];
              break;
            case 'FGiftQty':
              newKey = '搭赠数量';
              obj[newKey] = item[key];
              break;
            case 'FFeeQty':
              newKey = '费用数量';
              obj[newKey] = item[key];
              break;
            case 'FTotalQty':
              newKey = '数量小计';
              obj[newKey] = item[key];
              break;
            case 'FBalanceAmount':
              newKey = '货款金额';
              obj[newKey] = item[key];
              break;
            case 'FFeeAmount':
              newKey = '费用金额';
              obj[newKey] = item[key];
              break;
          }
        });
        Lists.push(obj);
      }
    });
   const header = ["商品系列", "商品名称", "商品编码", "规格型号", "条码", "单价/箱", "建议数量", "批次号", "库存数量", "货款数量", "搭赠数量", "费用数量", "数量小计", "货款金额", "费用金额"]; //定义顺序
   //放入表头
    const data = XLSX.utils.json_to_sheet(Lists, { header: header });
    // 创建工作簿
    const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {}, };
    data['!cols'] = [{ // 设置单元格宽度 
      wpx: 80
    }, {
      wpx: 370
    },
    {
      wpx: 100
    },
    {
      wpx: 100
    },
    {
      wpx: 100
    },
    ]
    //给导出的表格添加计算公式
    wb.Sheets['Sheet1'] = data;
    for (let i = 2; i < Lists.length + 2; i++) {
      //总价=单价*件数
      wb.Sheets['Sheet1']['M' + i] = { t: 'n',  f: 'J' + i + '+L' + i + '+K' + i, }
      wb.Sheets['Sheet1']['N' + i] = { t: 'n',  f: 'F' + i + '*J' + i, }
      wb.Sheets['Sheet1']['O' + i] = { t: 'n',  f: 'F' + i + '*L' + i, }
    }
     // 将工作表放入工作簿中
    XLSX.utils.book_append_sheet(wb, data, 'data');
    // 生成文件并下载
    XLSX.writeFile(wb, '商品清单.xlsx',);

到此导出就做好了 可能关于导出的计算公式大家还有些不明白的地方

t是数据的类型 f就是给当前项添加公式


这里的 ‘M’ ‘J’ 'L’之类的就是上图所示的表格的某一项 循环后就可以获取到全部添加公式了

导入的话就比较简单了

//导入
const httpRequest = (e) => {
  let Goodsa = []
  let Goodsab = []
  if (filter.value.GroupID != 0) {
    let file = e.file; // 文件信息
    if (!file) {
      return false;
    } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
      ElMessage.error('上传格式不正确，请上传xls或者xlsx格式');
      return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = async (ev) => {
      let options = {
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      };
      try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          // 以字符编码的方式解析
          type: 'binary',
        });

        // 取第一张表
        const exlname = workbook.SheetNames[0];
        const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]); // 生成json表格内容
        let Lists = [];
    
        // 将 JSON 数据挂到 data 里
        exl.map((item: any) => {
          //处理接口返回的商品数据转成可以处理的字段
          let obj = {};
          if (item.FID != 0) {
            Object.keys(item).map((key, i) => {
              let newKey;
              switch (key) {
                case '商品系列':
                  newKey = 'FSeriesName';
                  obj[newKey] = item[key];
                  break;
                case '商品编码':
                  newKey = 'FNumber';
                  obj[newKey] = item[key];
                  break;
                case '商品名称':
                  newKey = 'FName';
                  obj[newKey] = item[key];
                  break;
                case '条码':
                  newKey = 'FBarCode';
                  obj[newKey] = item[key];
                  break;
                case '规格型号':
                  newKey = 'FSpec';
                  obj[newKey] = item[key];
                  break;
                case '单价/箱':
                  newKey = 'FSalePrice';
                  obj[newKey] = item[key];
                  break;
                case '库存数量':
                  newKey = 'FQtyAvailable';
                  obj[newKey] = item[key];
                  break;
                case '批次号':
                  newKey = 'FBatchNo';
                  obj[newKey] = item[key];
                  break;
                case '建议数量':
                  newKey = 'FSuggestQty';
                  obj[newKey] = item[key];
                  break;
                case '货款数量':
                  newKey = 'FBalanceQty';
                  obj[newKey] = item[key];
                  break;
                case '搭赠数量':
                  newKey = 'FGiftQty';
                  obj[newKey] = item[key];
                  break;
                case '费用数量':
                  newKey = 'FFeeQty';
                  obj[newKey] = item[key];
                  break;
                case '数量小计':
                  newKey = 'FTotalQty';
                  obj[newKey] = item[key];
                  break;
                case 'FBalanceAmount':
                  newKey = '货款金额';
                  obj[newKey] = item[key];
                  break;
                case 'FFeeAmount':
                  newKey = '费用金额';
                  obj[newKey] = item[key];
                  break;
              }
            });
          }
          Lists.push(obj);
        });
        //console.log(Lists);
        onLoad(Lists);
      } catch (e) {
        return false;
      }
    };
    fileReader.readAsBinaryString(file);
  } else {
    ElMessage.error('请先选择公司');
  }
};

至此导入导出完成