油猴脚本——2、下载网页上的table表格

最新推荐文章于 2025-08-06 16:42:26 发布

凉豆菌

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量141

点赞数 4

CC 4.0 BY-SA版权

分类专栏：油猴脚本文章标签： javascript 油猴

本文链接：https://blog.csdn.net/m0_67755668/article/details/149597964

油猴脚本专栏收录该内容

2 篇文章

订阅专栏

实现效果

实现代码

// ==UserScript==
// @name         表格下载
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  下载页面上的表格
// @author       LDOU
// @match        http://localhost:8012/login
// @include      *
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.localhost
// @grant        none
// @require      https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js
// @require      https://unpkg.com/xlsx@0.18.5/dist/xlsx.full.min.js
// @run-at       context-menu
// ==/UserScript==

(function() {
    'use strict';
    let $table = document.getElementsByClassName('el-table--fit');
    let $table2 = document.getElementsByTagName('table');
    console.log($table2)
    if ($table&&$table.length) {
        for(let i=0;i<$table.length;i++){
            createBtn($table[i])
        }
    } else if($table2&&$table2.length){
        for(let i=0;i<$table2.length;i++){
            createBtn($table2[i])
        }
    } else {
        alert("没有找到表格")
    }
    function createBtn(el){
        el.style.position = 'relative'
         // 创建一个固定定位的按钮
        let button = document.createElement('div');
        button.innerText = '下载表格';
        button.style.position = 'absolute';
        button.style.top = '0px';
        button.style.left = '0px';
        button.style.backgroundColor = '#007bff';
        button.style.color = '#fff';
        button.style.padding = '10px';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.zIndex = '10000';
        el.appendChild(button);

        // 按钮绑定点击事件
        button.addEventListener('click', () => {
            downloadTable(el);
        });
    }

    //下载列表
    function downloadTable($el){
        let $table = $el
        if($table){
           const wb = XLSX.utils.table_to_book($table, {raw: true})
           const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
           console.log("输出：",FileSaver,window)
           saveAs(
               new Blob([wbout], {type: 'application/octet-stream'}),
               `表格.xlsx`,
           )
        }else{
            alert("没有找到表格")
        }
    }
    // Your code here...
})();

代码功能分析

用于在网页上查找表格并添加下载按钮，支持将表格导出为Excel文件（xlsx格式）。

核心逻辑解析

脚本初始化部分

使用@match和@include限制脚本执行范围
引入FileSaver.js和xlsx.js两个必要库
设置@run-at context-menu表示在右键菜单中触发

表格查找逻辑

优先查找class包含el-table--fit的元素（Element UI表格）
次优查找所有<table>标签
未找到表格时显示提示

按钮创建函数

为每个表格创建绝对定位的下载按钮
按钮样式设置为蓝色背景、白色文字
绑定点击事件触发下载功能

表格下载函数

使用XLSX.utils.table_to_book将DOM表格转为工作簿对象
配置输出选项后通过FileSaver.js保存文件
默认文件名为"表格.xlsx"

技术实现细节

DOM操作

document.getElementsByClassName()
document.getElementsByTagName()
document.createElement()
element.appendChild()
element.addEventListener()

Excel导出

XLSX.utils.table_to_book()
XLSX.write()
new Blob()
saveAs()