【油猴脚本】00032 案例 Tampermonkey油猴脚本,爬虫,仅用于学习,不要乱搞。网页数据获取器-进入页面缩小化显示。JavaScript爬虫,HTML+Css+JavaScript编写

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

【油猴脚本】00032 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。网页数据获取器-进入页面缩小化显示。Jquery爬虫，JavaScript爬虫，Bootstrap3，sheetjs，JqueryUi ，HTML+Css+JavaScript编写

使用的库：

Bootstrap3的Css库CDN

https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css

Bootstrap3的文档:https://v3.bootcss.com/

Jquery库CDN，Jquery库文档：

 https://code.jquery.com/jquery-1.9.1.min.js

jquery官网：

https://jquery.com/

jquery中文网站：

http://asprain.oss-cn-hangzhou.aliyuncs.com/category-ajax.htm

sheetjs库CDN：

 https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js

Jquery的库JqueryUi CDN：

https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js

📚一、效果

网页数据获取器-进入页面缩小化显示

📚二、核心解析

💡1. 修改HTML代码：

修改前

/*修改第1处*/
         <div class="panel-body">
            <div id="draggableArea" class="draggableBtn btn btn-default">🛼 拖拽这里移动位置</div>
            <div id="scaleDownArea" class="scaleDown btn btn-default">➖ 缩小窗口</div>
            <div id="scaleUpArea" class="scaleDown btn btn-default" style="display: none;">➕ 复原窗口</div>
         </div>

/*修改第2处*/ 
  <div class="col-md-8 table-card scaleDownCard" style="padding:1em;">

修改后

         <div class="panel-body">
            <div id="draggableArea" class="draggableBtn btn btn-default">🛼 拖拽这里移动位置</div>
            <div id="scaleDownArea" class="scaleDown btn btn-default"  style="display: none;">➖ 缩小窗口</div>
            <div id="scaleUpArea" class="scaleDown btn btn-default">➕ 放大窗口</div>
         </div>

💡2. 修改Css代码：

   .scaleDownCard{
   
   
    width:230px;
    height:213px;
   }
   .scaleDownCard .draggableBtn {
   
   
    margin-bottom:10px;
   }

📚三、完整源代码，可以直接复制使用

✍️JavaScript

// ==UserScript==
// @name         网页数据获取器-进入页面缩小化显示
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  动态渲染表格，美化缩小化窗口
// @author       CSDN@宝码香车
// @match        https://developer.mozilla.org/zh-CN/
// @match        https://www.此广告位招商.com/
// @match        *://*/*
// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css
// @require      https://code.jquery.com/jquery-1.9.1.min.js
// @require      https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js
// @require      https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-end
// ==/UserScript==


(function () {
   
   
  'use strict';

  let tableHtml = `
    <div class="col-md-8 table-card scaleDownCard" style="padding:1em;">
      <div class="card-title">网页数据获取器</div>
    <div  class="panel panel-default">
         <div class="panel-heading">
            功能区
         </div> 
         <div class="panel-body">
            <div id="draggableArea" class="draggableBtn btn btn-default">🛼 拖拽这里移动位置</div>
            <div id="scaleDownArea" class="scaleDown btn btn-default"  style="display: none;">➖ 缩小窗口</div>
            <div id="scaleUpArea" class="scaleDown btn btn-default">➕ 放大窗口</div>
         </div>
      </div>
      <div  class="panel panel-default">
         <div class="panel-heading">
            操作区
         </div>
         <div class="panel-body">
            <button id="editCols" class="btn btn-default">📝 编辑表格</button>
            <button id="run" class="btn btn-default">🫳 获取当前页数据</button>
            <button id="getDataRange" class="btn btn-default">🙌 获取更多页数据</button>
            <button id="outExcel" class="btn btn-default">☝️ 导出Excel</button>
         </div>
      </div>
      <div  class="panel panel-default">
         <div class="panel-heading">
                配置多页参数区
         </div>
         <div class="panel-bod