日常知识总结：

前端调用后端接口，下载生成的 excel 文件。

前端通过调用后端接口，接收到后端返回的文件流。动态创建触发 a 标签点击事件，实现下载的功能。

/**
 * 导出 excel 报表接口
 * @param {Object} params
 * @param {Object} data
 */
export const exportPreSalePermitExcel = (params, data) => axios({
  url: 'xxx',
  method: 'post',
  params,
  data,
  responseType: 'blob',
});

在  vue 组件文件中，调用后端接口，动态创建 a 标签触发，实现文件下载 。

import { exportPreSalePermitExcel } from '@/apis/nres/contractQuery';

// 下载 excel 报表
async exportPreSalePermit() {
  this.downExcel(await exportPreSalePermitExcel({}, this.getQueryCondition()));
},

// res 为后端返回的文件流
downExcel(res){
    const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
    const link = document.createElement('a');
    link.download = 'myFile.xlsx';
    link.style.display = 'none';
    link.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    link.click();
    document.body.removeChild(link);
}

注意：

1，在调用后端接口时，要设置 responseType 为 'blob' 类型。

2，这里下载的是 .xlsx 文件，需在构建 Blob 对象时设置 { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }。不同的下载文件类型对应不同的 type，可自行上网查阅。

获取当年日期时间

在使用 element-ui 的日期时间选择器组件时，根据业务需求设置日期时间默认值为当年。

getCurrentYear(){
     const N = new Date().getFullYear();
     const D = new Date(N + 1, 0, 0).getDate();
     return [`${N}-01-01 00:00:00`, `${N}-12-${D} 23:59:59`];
}

获取起止日期间隔月

在使用 echarts 做图表时，X 时间轴根据用户所需日期范围需动态设置 。

 // 获取起止日期间隔月
getMonth(prams ) {
   const {startTime, endTime} = prams ;
   let syear = parseInt(startTime.split('-')[0], 10);
   const eyear = parseInt(endTime.split('-')[0], 10);
   let smonth = parseInt(startTime.split('-')[1], 10);
   const emonth = parseInt(endTime.split('-')[1], 10);
   while ((syear * 12 + smonth) <= (eyear * 12 + emonth)) {
      date.push(`${`${syear}-${(`0${smonth}`).slice(-2)}`}`);
      smonth++;
      if (++smonth > 12) {
        syear++;
        smonth = 1;
        }
      }
   return date; 
 },
const result = getMonth({startTime:'2021-01-01', endTime:'2021-03-31'}); // ['2021-01','2021-02','2021-03']

使用模板字符串动态渲染表格

日常需求中，当表格较为复杂，常见 UI 表格组件不满足需求时。考虑使用模板字符串的方式在 vue 中构建为计算属性来动态渲染表格，解决动态表格无法渲染问题 。

<template>
  <table border="1" v-html="landTableHTML"></table>
</template>

<script>
export default {
  props: {
    landInfo: {type: Array, default: () => ([])},
  },
  computed: {
    // 使用模板字符串动态渲染表格（解决动态表格无法渲染的问题）
    landTableHTML() {
      let str = `
         <tr>
            <td rowspan="2">地块名称</td>
            <td rowspan="2">地块编码</td>
            <td rowspan="1" colspan="4">坐落</td>
            <td rowspan="2">原合同面积（亩）</td>
            <td rowspan="2">确权实测面积（亩）</td>
            <td rowspan="2">地力等级</td>
            <td rowspan="2">备注</td>
         </tr>
         <tr>
            <td>东至</td>
            <td>南至</td>
            <td>西至</td>
            <td>北至</td>
         </tr>
          `;
      for (let i = 0; i < this.landInfo.length; i += 1) {
        str += `
          <tr>
            <td>${this.landInfo[i].DKMC ?? ''}</td>
            <td>${this.landInfo[i].DKBM ?? ''}</td>
            <td>${this.landInfo[i].DKDZ ?? ''}</td>
            <td>${this.landInfo[i].DKNZ ?? ''}</td>
            <td>${this.landInfo[i].DKXZ ?? ''}</td>
            <td>${this.landInfo[i].DKBZ ?? ''}</td>
            <td>${this.formatMJ(this.landInfo[i].SYQMJ)}</td>
            <td>${this.formatMJ(this.landInfo[i].SCMJ)}</td>
            <td>${this.formatDLDJ(this.contractData.landInfo[i].DLDJ)}</td>
            <td>${this.landInfo[i].DKBZXX ?? ''}</td>
          </tr>`;
      }
      str += `
        <tr>
          <td>面积总计</td>
          <td> -- </td>
          <td colspan="4"> -- </td>
          <td>${this.SYQMJSUM}</td>
          <td>${this.SCMJSUM}</td>
          <td> -- </td>
          <td> -- </td>
        </tr>`;
      return str;
    },
    SYQMJSUM() {
      let sumSYQMJ = 0;
      this.landInfo.forEach(item => sumSYQMJ += item.SYQMJ);
      return this.formatMJ(sumSYQMJ);
    },
    SCMJSUM() {
      let sumSCMJ = 0;
      this.landInfo.forEach(item => sumSCMJ += item.SCMJ);
      return this.formatMJ(sumSCMJ);
    },
  },
  methods: {
    // 格式化面积为亩
    formatMJ(num) {
      if (num) {
        const result = parseFloat(num) * 0.0015;
        return result.toFixed(2);
      }
      return '';
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  text-align: center;
  td {
    padding: 20px;
  }
}
</style>