【x-spreedsheet】
文档：https://hondrytravis.github.io/x-spreadsheet-doc/
GitHub：/myliang/x-spreadsheet/tree/master/src
目标：实现表格内使用ctrl+c的时候可将内容复制到粘贴板
思路：重写底层代码
步骤：
①当点击复制时，会触发/sheet.js下的copy方法，可以重写data_proxy.js的copy方法，来实现复制到粘贴板
//sheet.jsfunction copy() {const {data, selector } = this;data.copy();//data_proxy.jsselector.showClipboard();}//data_proxy.jscopy() {this.clipboard.copy(this.selector.range);}
代码如下：
//重写复制方法this.sheet.sheet.data.copy = function copy() {this.clipboard.copy(this.selector.range);// 重写 startlet {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.jsfunction 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.jssheetReset.call(this);}}//data_proxy.jspasteFromText(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);// 重写 startlet {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);});};
以上就是该功能的实现方式，对你有用的话点个赞打个赏呗~
如果觉得《【x-spreadsheet】实现 ctrl+c复制内容到粘贴板及ctrl+v粘贴功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
