vue2 el-table数据转excel

最新推荐文章于 2024-07-19 10:47:34 发布

a261442315

最新推荐文章于 2024-07-19 10:47:34 发布

阅读量223

点赞数 3

文章标签： excel vue.js javascript

本文链接：https://blog.csdn.net/a261442315/article/details/140120919

版权

<el-table :data="tableData" height="170" border>
          <el-table-column v-for="column in tableColumns" :prop="column.value" :label="column.label"  :key="column.value" width="180"></el-table-column>
        </el-table>


        <el-button type="primary" @click="exportToExcel">导出到Excel</el-button>

//tableColumns为数组包对象，对象含有label和value键值对

async exportToExcel() {
      if (this.tableData.length == 0) {
        this.$message({
          message: '表格中暂无数据',
          type: 'warning',
          showClose: true,
        })
      } else {
        const excelContent = this.createExcelXML(this.tableData, this.tableColumns);
        const getCurrentDateTimeString = () => {
          const now = new Date();
          const year = now.getFullYear();
          const month = String(now.getMonth() + 1).padStart(2, '0');
          const day = String(now.getDate()).padStart(2, '0');
          const hours = String(now.getHours()).padStart(2, '0');
          const minutes = String(now.getMinutes()).padStart(2, '0');
          const seconds = String(now.getSeconds()).padStart(2, '0');
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        };
        const currentDateTime = getCurrentDateTimeString();
        try {
          const handle = await window.showSaveFilePicker({
            suggestedName: `${currentDateTime}`,//文件名可自定义
            types: [
              {
                description: 'Excel Files',
                accept: { 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'] }
              }
            ]
          });

          const writableStream = await handle.createWritable();
          await writableStream.write(new Blob([excelContent], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
          this.downLoadLoading = true;
          await writableStream.close();
          this.downLoadLoading = false;
          this.$message.success('文件保存成功！');
        } catch (error) {
          console.error('保存文件时出错:', error);
        }
      }
    },
    createExcelXML(data, columns) {
      let xml = `<?xml version="1.0"?>
        <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
          xmlns:o="urn:schemas-microsoft-com:office:office"
          xmlns:x="urn:schemas-microsoft-com:office:excel"
          xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
          xmlns:html="http://www.w3.org/TR/REC-html40">
          <Worksheet ss:Name="Sheet1">
            <Table>`;

      xml += '<Row>';
      columns.forEach(column => {
        xml += `<Cell><Data ss:Type="String">${column.label}</Data></Cell>`;
      });
      xml += '</Row>';

      data.forEach(row => {
        xml += '<Row>';
        columns.forEach(column => {
          xml += `<Cell><Data ss:Type="String">${row[column.value]}</Data></Cell>`;
        });
        xml += '</Row>';
      });

      xml += `</Table></Worksheet></Workbook>`;
      return xml;
    },