本文主要是介绍网页表格复制器(油猴插件脚本),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
网页表格复制器(油猴插件脚本)
测试表格
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
文本居中 | 文本居右 | 文本居左 | 默认 |
test1-1 | test1-2 | test1-3 | test1-4 |
test2-1 | test2-2 | test2-3 | test2-4 |
脚本代码
// ==UserScript==
// @name 网页表格复制器
// @namespace http://tampermonkey.net/
// @version 0.231130.2
// @description 网页表格复制脚本
// @author N-cat
// @match *://*/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @downloadURL https://update.greasyfork.org/scripts/481068/%E7%BD%91%E9%A1%B5%E8%A1%A8%E6%A0%BC%E5%A4%8D%E5%88%B6%E5%99%A8.user.js
// @updateURL https://update.greasyfork.org/scripts/481068/%E7%BD%91%E9%A1%B5%E8%A1%A8%E6%A0%BC%E5%A4%8D%E5%88%B6%E5%99%A8.meta.js
// ==/UserScript==(function() {'use strict';// 样式添加const style = `<style>.get{position:fixed;right:80px;bottom:150px;background-color:#00a1d6;color:white;height:50px;width:50px;border-radius: 10px;font-size:15px;border:solid 3px #FA5A57;cursor:pointer;outline: none;z-index: 999;}.alertMessage{position: fixed;top: 30px;left: 40%;right: 40%;padding: 20px 30px;background: rgba(0, 0, 0, 0.8);color: #ffffff;font-size: 20px;text-align: center;z-index: 999;display: none;border-radius:5px;}</style>`;let div = document.createElement("div");div.innerHTML += style;document.body.append(div);// 提示框var alertMessage = document.createElement("div");alertMessage.classList.add('alertMessage');document.body.append(alertMessage);function alertmess(mess) {alertMessage.innerHTML = mess; // 填入要显示的文字alertMessage.style.display = "inline"; // 显示弹框setTimeout(function () { // 倒计时alertMessage.innerHTML = ''; // 清空文本alertMessage.style.display = "none" // 隐藏弹框}, 3000); // 3秒}// 获取按钮var get = document.createElement("input");get.setAttribute("type", "button");get.setAttribute("value", "触发");get.classList.add('get');document.body.append(get);// 获取table标签var getnum = 0 // 0:未(取消)触发 1:已触发let startX = 9999; // 按下坐标let startY = 9999;let endX = 9999; // 鼠标坐标let endY = 9999;get.onclick = function(){var tds = document.querySelectorAll('td');console.log(tds);for(let i of tds){// 文本设置无法选中i.style.userSelect = "none";// 鼠标悬浮在td上时提示i.addEventListener("mousemove", function(){i.style.backgroundColor = 'black';i.style.color = 'white';for(let j of i.children){j.style.color = 'white';}});i.addEventListener("mouseout", function(){i.style.removeProperty("background-color");i.style.removeProperty("color");for(let j of i.children){j.style.removeProperty("color");}});}// 框选变色(还未添加复制功能)window.addEventListener("mousedown", function(e){startX = e.clientX;startY = e.clientY;});window.addEventListener("mousemove", function(e){endX = e.clientX;endY = e.clientY;for(let i of tds){// 获取tr元素的左上角坐标和宽度、高度var rect = i.getBoundingClientRect();var tdleft = rect.left;var tdtop = rect.top;var tdwidth = rect.width;var tdheight = rect.height;console.log("起止坐标", startX, endX, startY, endY);// console.log("td坐标", tdleft, tdtop);if (startX <= tdleft + tdwidth && startY <= tdtop + tdheight && endX >= tdleft && endY >= tdtop) {// 将tr元素的背景色设置为黑色(或其他你想要的颜色)i.style.backgroundColor = 'black';i.style.color = 'white';} else if (startX !== 9999){i.style.removeProperty("background-color");i.style.removeProperty("color");}}});// 抬起鼠标重置window.addEventListener("mouseup", function(e){startX = 9999; // 按下坐标startY = 9999;endX = 9999; // 鼠标坐标endY = 9999;for(let i of tds){i.style.removeProperty("background-color");i.style.removeProperty("color");}});// 点击复制全部execl(基础适配)var tables = document.getElementsByTagName("table");for(let i of tables){i.addEventListener("mousedown", function(){var execl = []var trs = i.getElementsByTagName("tr");for(let j of trs){var row = []var tds = j.getElementsByTagName("td");for(let k of tds){if(k.style.display !== "none"){row.push(k.innerText);}}execl.push(row);}console.log(execl);var csv = ""for(let i of execl){for(let j of i){csv = csv + '"' + "'" + j + '"\t';}csv = csv.slice(0,-1) + "\n";}console.log(csv);// 复制视频名称到剪切板const textarea = document.createElement('textarea');document.body.appendChild(textarea);textarea.innerHTML = csv;textarea.select(); // 选取文本域的内容if (document.execCommand('copy')) {document.execCommand('copy');alertmess("网页表格已复制到剪切板");}document.body.removeChild(textarea);});}alertmess("网页表格复制器开启成功");}
})();
这篇关于网页表格复制器(油猴插件脚本)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!