网页表格复制器（油猴插件脚本）

网页表格复制器（油猴插件脚本）

测试表格

脚本代码

// ==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("网页表格复制器开启成功");
    }
})();