vue2/3 elementUI/table 从excel复制粘贴到表格,从表格复制粘贴到excel

不拘泥于框架哈,基础思路有了,对于简单的复制粘贴是够用的

------------------------------------------注意此方法线上版需要安全证书---------------------------------------------

从excel粘贴到表格
let brr=[];
let arr=[];
navigator.clipboard.readText()
					.then((v) => {
						brr= v.split("\r\n");
						brr.map((it) => {
							arr.push({
								x: it.split("\t")[0],
								y: it.split("\t")[1],
								fitPoint: true,
								isSplit: false,
							});
						});
                   });

v就是从表格复制来的内容,因为我的需求是粘贴前两列,所以[0][1]就可以了,后续有其他需求可以自己去丰富哈

效果:

从表格复制到excel

仅支持基础的,也就是纯字符的,对于这种复选框还没啥解决办法。。。。不过也是提供一个思路,大家自己丰富哈

copy() {
				let arr = [];
				this.tableData.map((it, idx) => {
					arr.push({
						a: idx + 1,
						b: '',
						c: it.x,
						d: it.y,
						e: ''
					})
				})
				const result = arr.map(obj => Object.values(obj).join('\t')).flat();
				result.unshift('组数\t点\t浓度值X\tT/C值Y\t界值');
				let b = result.join('\r\n');
				navigator.clipboard.writeText(b)
					.then(() => {
						this.$message.success('复制成功')
						console.log('文本已经成功复制到剪切板');
					})
					.catch(err => {
						console.error('无法复制此文本:', err);
					});
			},

这里的tabledata就是[{},{},{}]这种形式哈

效果:

Vue.js实现Excel表格数据复制粘贴到Element UI(简称El-Table)通常需要借助一些第三方库,如`vue-excel-export`(用于读取Excel文件)和`clipboard`(处理复制粘贴操作)。以下是一个简化的步骤: 1. 首先安装所需库: ```bash npm install vue-excel-import clipboard-vue ``` 2. 引入并配置: 在组件的`main.js`或`app.vue`导入并注册这两个库: ```javascript import VueExcelExport from 'vue-excel-export'; import Clipboard from 'clipboard-vue'; // 注册全局组件 Vue.use(VueExcelExport); Vue.use(Clipboard); // 初始化Clipboard插件(如果需要) Clipboard.config({ target: 'textarea', // 可选,指定目标元素,默认是body }); ``` 3. 创建一个方法来读取粘贴内容: ```javascript export default { data() { return { excelData: null, }; }, methods: { handlePaste(event) { if (event.clipboardData && event.clipboardData.items) { const items = event.clipboardData.items; for (let i = 0; i < items.length; i++) { if (items[i].kind === 'text/plain') { // 检查是否包含文本数据 this.excelData = items[i].getData('text/plain'); break; } } } }, }, mounted() { document.addEventListener('paste', this.handlePaste); // 渲染el-table时,可以将excelData赋值给table的数据源 this.$nextTick(() => { this.myTableData = this.processExcelData(this.excelData); // 这里假设有一个processExcelData函数能解析数据 }); }, beforeDestroy() { document.removeEventListener('paste', this.handlePaste); }, }; ``` 4. 定义`processExcelData`函数来转换粘贴Excel数据格式,使其适应El-Table的要求。这一步取决于你的实际数据结构。 注意:上述代码只是一个基础示例,实际应用还需要处理可能出现的错误,并考虑兼容性和用户交互体验。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值