Vue实现复制excel表格内容粘贴至网页

需求

要求复制excel表格内容粘贴至网页表格，并且自动生成格式，不要问为什么不使用导入excel，我也不知道客户为什么不用

秉承用户是上帝的原则?

使用Handsontable表格组建 引入与使用

代码语言：javascript复制

cnpm install handsontable @handsontable/vue
//main.js中
import 'handsontable/dist/handsontable.full.css';
// vue页面
import {
    HotTable
} from '@handsontable/vue';
import Handsontable from 'handsontable';

主体实现代码

代码语言：javascript复制

<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-row>
        <el-form-item label="月份">
          <el-date-picker v-model="queryParams.date" type="month" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="save">保存</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="月份预测小结：" required>
            <el-input style="width:400px" type="textarea" v-model="queryParams.funName" placeholder="月份预测小结" clearable
              size="small"  />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <hot-table :data="tableData" width='100%' :colHeaders="colHeaders" :columns="columns" :manualRowResize='true'
        :copyable='true' :settings="hotSettings" :after-change="afterChange" :rowHeights="40" :colWidths="150"
        className="htCenter htMiddle notread">
      </hot-table>
    </div>
  </div>
</template>

<script>

  import {
    HotTable
  } from '@handsontable/vue';
  import Handsontable from 'handsontable';
  import {
    getCountDays,
    getCurrentMonthDayList
  } from "@/utils/index";
  export default {
    name: "financialStatement",
    components: {
      HotTable
    },

    data() {
      return {
        // 查询参数
        queryParams: {
          date: new Date()
        },
        colHeaders: ["日期", "预计上日余额", "本日收入", "本日支出", "预计本日余额"],
        columns: [{
            editor: false,
            readOnly: true
          },
          {
            type: 'numeric'
          },
          {
            type: 'numeric'
          },
          {
            type: 'numeric'
          },
          {
            type: 'numeric'
          }
        ],
        rowHeaders: [],
        tableData: [],
        hotSettings: {
          //数据部分，这个就不多说了
          data: [],
         
        }
      };
    },
    created() {
      var dayList = getCurrentMonthDayList(this.queryParams.date)
      dayList.forEach(element => {
        var day = [element, '', '', '', '']
        this.tableData.push(day)
      });
    },
    mounted() {
      Handsontable.hooks.add("afterChange", function (result) {
        console.log("-result", result)
      });
    },
    methods: {
      handleQuery() {
          console.log("---search", this.queryParams)
      },
      save() {
          console.log("---save", this.tableData)
      },
      afterChange: function (changes, source) {
        //   if (source == 'edit') {
        //     console.log(changes);
        //     changes.forEach(([row, prop, oldValue, newValue]) => {
        //       //this 表示当前的handsontable对象
        //       let cell = this.getCell(row, prop);
        //       cell.style.background = 'lavender';
        //     });
        //   }
      },
      /** 查询菜单列表 */
      getList() {
    //    查询数据
      },
      mergeCell(changes) {
        // 有变化
        if (changes) {
          // 遍历变化行数
          changes.forEach(([row]) => {
            // 只对3的倍数行进行合并
            //这里条件判断可以写复杂一点，确保粘贴非3倍数时候的处理，我偷懒所以。。
            if ((row / 3) === this.hotSettings.mergeCellsCount) {
              // 合并处理
              this.hotSettings.mergeCells.push({
                row: row,
                col: 0,
                rowspan: 3,
                colspan: 1
              }, {
                row: row,
                col: 24,
                rowspan: 3,
                colspan: 1
              });
              // 只合并一次提高运行效率，不然粘贴大量数据多次合并会卡
              this.hotSettings.mergeCellsCount  
            }
          });
        }
      }
    }
  };
</script>

效果

截屏2020-07-23 下午2.51.19.png

excel handsontable png 表格

0 人点赞