【x-spreadsheet】实现 ctrl+c复制内容到粘贴板及ctrl+v粘贴功能

【x-spreedsheet】
文档：https://hondrytravis.github.io/x-spreadsheet-doc/
GitHub：https://github.com/myliang/x-spreadsheet/tree/master/src

目标：实现表格内使用ctrl+c的时候可将内容复制到粘贴板
思路：重写底层代码
步骤：
①当点击复制时，会触发/sheet.js下的copy方法，可以重写data_proxy.js的copy方法，来实现复制到粘贴板

//sheet.js
function copy() {
  const { data, selector } = this;
  data.copy();//data_proxy.js
  selector.showClipboard();
}
//data_proxy.js
copy() {
    this.clipboard.copy(this.selector.range);
}

代码如下：

//重写复制方法
this.sheet.sheet.data.copy = function copy() {
	this.clipboard.copy(this.selector.range);
	// 重写 start
	let { sri, sci, eri, eci } = this.selector.range;
	let content = ``;
	//要复制的数据处理，可根据需要优化
	for (let i = sri; i <= eri; i++) {
		for (let j = sci; j <= eci; j++) {
			let text = this.rows.getCell(i, j) ? this.rows.getCell(i, j).text : null;
			content += text ? text : '';
			content += j === eci ? '' : '\t';
		}
		content += i === eri ? '' : '\r\n';
	}
	window.$copyText(content);//绑定了 VueClipboard 的$copyText方法，用于复制
	//end
};

②然后又发现，复制到粘贴板了，但是没法在spreadsheet表格上粘贴。原因是粘贴时触发以下事件：

//sheet.js
function paste(what, evt) {
  const { data } = this;
  if (data.settings.mode === 'read') return;
  if (data.paste(what, msg => xtoast('Tip', msg))) {
    sheetReset.call(this);
  } else if (evt) {
    const cdata = evt.clipboardData.getData('text/plain');
    this.data.pasteFromText(cdata);//data_proxy.js
    sheetReset.call(this);
  }
}
//data_proxy.js
pasteFromText(txt) {
    const lines = txt.split('\r\n').map(it => it.replace(/"/g, '').split('\t'));
    if (lines.length > 0) lines.length -= 1;//此行代码有问题，注释掉就行了
    const { rows, selector } = this;
    this.changeData(() => {
      rows.paste(lines, selector.range);
    });
  }

所有代码如下：

//初始化
this.sheet = new Spreadsheet('#x-spreadsheet-demo',{...});

//重写复制方法
this.sheet.sheet.data.copy = function copy() {
	this.clipboard.copy(this.selector.range);
	// 重写 start
	let { sri, sci, eri, eci } = this.selector.range;
	let content = ``;
	//要复制的数据处理，可根据需要优化
	for (let i = sri; i <= eri; i++) {
		for (let j = sci; j <= eci; j++) {
			let text = this.rows.getCell(i, j) ? this.rows.getCell(i, j).text : null;
			content += text ? text : '';
			content += j === eci ? '' : '\t';
		}
		content += i === eri ? '' : '\r\n';
	}
	window.$copyText(content);//绑定了 VueClipboard 的copyText方法，用于复制
	//end
};
//重写粘贴的格式化方法
this.sheet.sheet.data.pasteFromText = function pasteFromText(txt) {
	const lines = txt.split('\r\n').map((it) => it.replace(/"/g, '').split('\t'));
	//下列注释去掉的原因是因为他会使lines删掉一行，疑惑代码
	// if (lines.length > 0) lines.length -= 1;
	const { rows, selector } = this;
	this.changeData(() => {
		rows.paste(lines, selector.range);
	});
};

以上就是该功能的实现方式，对你有用的话点个赞打个赏呗~