Vue实现复制excel表格内容粘贴至网页
时间:2022-07-22
本文章向大家介绍Vue实现复制excel表格内容粘贴至网页,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
要求复制excel表格内容粘贴至网页表格,并且自动生成格式,不要问为什么不使用导入excel,我也不知道客户为什么不用
秉承用户是上帝的原则?
使用Handsontable表格组建 引入与使用
cnpm install handsontable @handsontable/vue
//main.js中
import 'handsontable/dist/handsontable.full.css';
// vue页面
import {
HotTable
} from '@handsontable/vue';
import Handsontable from 'handsontable';
主体实现代码
<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
- C++ 对vector进行排序
- 小程序优化36计
- 神经网络权重初始化问题
- Andrew Ng机器学习课程笔记--week11(图像识别&总结划重点)
- 市民近期到南沙有望体验到无人驾驶技术
- Andrew Ng机器学习课程笔记--week10(优化梯度下降)
- Andrew Ng机器学习课程笔记--week9(下)(推荐系统&协同过滤)
- Andrew Ng机器学习课程笔记--week9(上)(异常检测&推荐系统)
- python程序员开发必备的5大工具,你用过几个?
- Andrew Ng机器学习课程笔记--week8(K-means&PCA)
- Andrew Ng机器学习课程笔记--week7(SVM)
- Pytorch windows10安装教程
- Udacity并行计算课程笔记-The GPU Programming Model
- DeepLearning.ai学习笔记(二)改善深层神经网络:超参数调试、正则化以及优化--Week2优化算法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ASP.NET Core Swagger接入使用IdentityServer4 的 WebApi
- 基于IdentityServer4的OIDC实现单点登录(SSO)原理简析
- OpenGL ES 变量、结构体、语句、函数、精度
- OpenGL ES for Android 绘制矩形和正方形
- OpenGL ES for Android 绘制立方体
- 服务化最佳实践
- OpenGL ES for Android 深度测试
- OpenGL ES for Android 绘制旋转的地球
- [Hei.Captcha] Asp.Net Core 跨平台图形验证码实现
- Asp.Net Core 3.1 获取不到Post、Put请求的内容 System.NotSupportedException Specified method is not supported
- OpenGL ES for Android 播放视频
- Centos 7 在线安装 离线安装 最新 Docker-compose 的正确姿势 实践笔记
- OpenGL ES for Android 视频缩放、旋转、平移
- OpenGL ES for Android 相机预览
- OpenGL ES for Android 相机预览适配不同分辨率的手机