原生表格前端纯导出表格

最新推荐文章于 2024-06-26 15:41:00 发布

小宋i

最新推荐文章于 2024-06-26 15:41:00 发布

阅读量434

点赞数 1

本文链接：https://blog.csdn.net/weixin_50641294/article/details/121270480

版权

前端开发表格导出 Excel Vue

关键词由CSDN通过智能技术生成

原生表格前端纯导出表格

1.表格

 <!-- 中间表格 暂时空着 -->
    <div id="WordSection" class="table">
      <table style="width: 100% ;text-align: center">
        <tr>
          <th :colspan="colspan">专业</th>
          <th v-for="(major, index) in majorData" :key="index" rowspan="2">
            {{ major.majorName }}
          </th>
        </tr>
        <tr>
          <th v-for="index of colspan" :key="index">
            {{ indexLabels[index - 1].label }}
          </th>
        </tr>
        <tr>
          <td :colspan="colspan">总分</td>
          <td v-for="(major, majorIndex) in majorData" :key="majorIndex" rowspan="1" colspan="1">
            <span>{{ getCountData(major.id)[0] }} </span>
          </td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <template v-for="i of indexLevel">
            <td v-if="indexLabels[i - 1].spanList[index]" :key="i" :rowspan="indexLabels[i - 1].spanList[index]">
              {{ item[indexLabels[i - 1].field] }}
            </td>
          </template>
          <td
            v-for="(major, majorIndex) in majorData"
            :key="majorIndex"
            class="majorTd"
            :class="[`status-${getCellData(major.id, item.targetClassifyId)[2]}`]"
            rowspan="1"
            colspan="1"
            @click="handleDialog(getCellData(major.id, item.targetClassifyId)[1], item)"
          >
            <span>{{ getCellData(major.id, item.targetClassifyId)[0] }} </span>
          </td>
        </tr>
      </table>
    </div>

2.导出功能

// 导出表格
    exportExcel() {
      this.loading = this.$loading({
        // lock: true,
        text: '导出信息中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      });
      this.exportExcel1();
    },
    // 导出表格
    exportExcel1() {
      if (!window.Blob) {
        alert('您的浏览器不支持此操作。');
        return;
      }
      var html, link, blob, url, css;
      css =
        '<style>' +
        '@page WordSection1{size: 100% 100%;mso-page-orientation: landscape;}' +
        '#WordSection1 {page: WordSection1;}' +
        'table {border-collapse: collapse; width: 100%;height: 100%;text-align:center;}  th {border: 1px gray solid;padding: 4px;text-align:center;} td {border: 1px gray solid;padding: 4px;text-align:center;} .table tr td {text-align:center;}.table tr td span {display: inline-block;}.table tr td .inner-handle {display: inline-block;color: rgb(0, 182, 189);}.desc-title{background: rgb(237, 250, 250);}.td-title{font-weight:bold;}' +
        '</style>';
      html = document.getElementById('WordSection');
      html = html.innerHTML;
      blob = new Blob(['\ufeff', css + html], {
        type: 'applocation/vnd.ms-excel' // 将会被放入blob中的数组内容的MIME类型
      });
      url = URL.createObjectURL(blob);
      link = document.createElement('A');
      link.href = url;
      const fileName = '评估明细.xls';
      // 设置文件名称
      link.download = fileName;
      document.body.appendChild(link);
      if (navigator.msSaveOrOpenBlob) navigator.msSaveOrOpenBlob(blob, 'Document.xls');
      // IE10-11
      else link.click(); // other browsers
      document.body.removeChild(link);
      this.loading.close();
    }