首页 > 基础资料 博客日记
【油猴脚本】00019 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加数据导出Excel功能。Jquery爬虫，JavaScript爬虫HTML+Css+JavaScript编写
2024-11-04 00:00:06基础资料围观71次
本篇文章分享【油猴脚本】00019 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加数据导出Excel功能。Jquery爬虫，JavaScript爬虫HTML+Css+JavaScript编写，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣
【油猴脚本】00019 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加数据导出Excel功能。Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写
使用的库：
Bootstrap的Css库CDN:
https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css
Jquery库CDN：
https://code.jquery.com/jquery-1.9.1.min.js
sheetjs库CDN：
https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js
Jquery的库easyuijs CDN：
https://www.jeasyui.com/easyui/jquery.easyui.min.js
📚一、效果
把当前页的数据导出到Excel
导出后的Excel
📚二、核心解析
💡1.添加sheetjs库：
// @require https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js
💡2.添加导出Excel按钮：
<button id="outExcel" class="btn btn-default">导出Excel</button>
💡3.添加点击事件：
// 点击-导出Excel
$("#outExcel").click(function(){
let obj = {
htmlElementTable: '#test_table',
excelSaveName: '获取的数据'
}
htmlTableToExcel(obj)
})
💡4.添加导出Excel的函数：
function htmlTableToExcel(objOptions){
if(!objOptions){
alert("请填写函数调用参数")
return false;
}
let opt = objOptions;
// opt.htmlElementTable 需要转化的htmlTable
// opt.excelSaveName 导出的表格名称
// 1、寻找表格元素
let html_table = document.querySelector(`${opt.htmlElementTable}`)
// 2、创建新的工作簿
const wb = XLSX.utils.book_new()
// 3、将表格元素转sheet表格
const worksheet = XLSX.utils.table_to_sheet(html_table)
// 4、将sheet表添加到工作簿
XLSX.utils.book_append_sheet(wb, worksheet, "Sheet1");
// 5、保存工作簿
XLSX.writeFile(wb, `${opt.excelSaveName}.xlsx`)
}
📚三、完整源代码，可以直接复制使用
✍️JavaScript
// ==UserScript==
// @name 获取数据-导出数据为Excel
// @namespace http://tampermonkey.net/
// @version 2024-09-12
// @description 动态渲染表格
// @author CSDN@宝码香车
// @match https://developer.mozilla.org/zh-CN/
// @match https://www.zhipin.com/web/geek/job?city=100010000
// @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.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js
// @require https://www.jeasyui.com/easyui/jquery.easyui.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" style="padding:1em;">
<div class="panel panel-default">
<div class="panel-heading">
操作区
</div>
<div class="panel-body">
<button id="draggableArea" class="draggableBtn btn btn-default">拖拽这里移动位置</button>
<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-body">
<form id="dataRangeForm" class="form-horizontal">
<div class="form-group clearfix">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><label style="margin-bottom:0;" for="startPageIdx1">开始页</label></span>
<input type="text" id="startPageIdx1" name="startPageIdx1" class="form-control input-line" placeholder="基础url地址">
</div>
</div>
<div class="col-xs-3">
<input type="number" name="startPageIdx2" class="form-control input-line" placeholder="页码数字参数">
</div>
<div class="col-xs-3">
<input type="text" name="startPageIdx3" class="form-control input-line" value="/" placeholder="若无值，默认是/">
</div>
</div>
<div class="form-group clearfix">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><label style="margin-bottom:0;" for="endPageIdx1">结束页</label></span>
<input type="text" name="endPageIdx1" class="form-control input-line" id="endPageIdx1" placeholder="基础url地址">
</div>
</div>
<div class="col-xs-3">
<input type="number" name="endPageIdx2" class="form-control input-line" placeholder="页码数字参数">
</div>
<div class="col-xs-3">
<input type="text" name="endPageIdx3" class="form-control input-line" value="/" placeholder="若无值，默认是/">
</div>
</div>
</form>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped" id="test_table">
</table>
</div>
<div class="msgWrap col-md-8">
<div class="msgContent">
</div>
</div>
</div>
`
let cssMore = `
.table-card{
position:fixed;
left:100px;
top:150px;
z-index:100;
background:#fff;
box-shadow: 0px 0px 0 10px #E95C8A;
}
.modal-body{
max-height:500px;
overflow-y: scroll;
}
.msgWrap{
padding:10px;
margin-top:10px;
}
.msgContent{
background:#000;
max-height:100px;
overflow-y:scroll;
}
.loadMsg{
color:#fff;
width: fit-content;
font-size: 16px;
font-family: monospace;
clip-path: inset(0 3ch 0 0);
animation: loadMsgAni 1s steps(4) infinite;
}
@keyframes loadMsgAni {to{clip-path: inset(0 -1ch 0 0)}}
table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.table-card tbody{display:block;height:200px; overflow:auto; -webkit-overflow-scrolling: touch; }
.table-card tbody::-webkit-scrollbar {
display: none; // 隐藏滚动条
}
.form-group:last-child{margin-bottom:0;}
.btn-primary {
color: #fff;
background-color: #E95C8A;
border-color: #E95C8A;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #c7275b;
border-color: #c7275b;
}
`
let bsCss = GM_getResourceText('bootstrapCss')
let startPageNum = 2 //开始页数
let endPageNum = 4 //结束页数，实际获取的是1-4页的数据，第一页本身就存在，指定2-4页即可
let isOrderNumber = true //是否显示序号
GM_addStyle(bsCss)
GM_addStyle(cssMore)
$('body').append(tableHtml)
$('.table-card').draggable({
handle: '#draggableArea'
})
// 初始化列
const initCols = (strArr)=>{
let addTableHtml = ''
if(isOrderNumber){ //显示序号
addTableHtml = `<thead><tr><td>序号</td>`
}else{
addTableHtml = `<thead><tr>`
}
for (const x of strArr) {
addTableHtml += `<td>${x}</td>`;
}
addTableHtml += `</tr></thead>`;
if(isOrderNumber){ //显示序号
addTableHtml += `<tbody><tr><td>1</td>`
}else{
addTableHtml += '<tbody><tr>'
}
for (const y of strArr) {
addTableHtml += `<td>默认无值</td>`;
}
addTableHtml += `</tr></tbody>`
return addTableHtml
}
//定义表格列
let tableColsArr = ['公司名称','招聘职位','薪资'] //列名称
let cssSelectorArr = [] //列的数据提取位置
cssSelectorArr.push('.job-card-wrapper .job-card-right .company-name a')
cssSelectorArr.push('.job-card-wrapper .job-card-left .job-title .job-name')
cssSelectorArr.push('.job-card-wrapper .job-card-left .salary')
let initColHtml = initCols(tableColsArr)
// 把动态渲染的表格内容，添加到页面中的table位置
$('#test_table').html(initColHtml);
//弹出框，编辑表格-列
let editTableCols = `
<div class="modal" id="editTableColsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="colseBtn">×</span></button>
<h4 class="modal-title" id="myModalLabel">编辑表格-列</h4>
</div>
<form class="modal-body">
</form>
<div class="modal-footer">
<button type="button" id="btn_addCol" class="btn btn-primary" style="float: left" data-dismiss="modal">添加一列</button>
<button type="button" class="btn btn-default colseBtn" data-dismiss="modal">关闭</button>
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
`
//动态渲染列
const colsRender = (optionStr,dataOptionStr,idxOption)=>{
if(!dataOptionStr){
dataOptionStr = '无参数，请填写参数，参数是css选择器'
}
let str = `
<div class="panel panel-default">
<div class="panel-heading">
<div class="row clearfix">
<div class="col-xs-6">
<div class="title">
第${idxOption}列
</div>
</div>
<div class="col-xs-6">
<button class="delCol btn btn-default btn-xs pull-right">删除此列</button>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<label style="margin-bottom:0;" for="colName${idxOption}">列的名称:</label>
</div>
<input type="text" id="colName${idxOption}" class="form-control" value="${optionStr}">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<label style="margin-bottom:0;" for="colData${idxOption}">数据位置:</label>
</div>
<input type="text" id="colData${idxOption}" class="form-control" value="${dataOptionStr}">
</div>
</div>
</div>
</div>
`
return str;
}
//动态渲染多列函数
const colsMoreRender = (strArrOpt)=>{
let str = ''
for(const x in strArrOpt){
if(cssSelectorArr.length>0){
let idxNum = parseInt(x)+1
str += colsRender(strArrOpt[x],cssSelectorArr[x],idxNum)
}else{
str += colsRender(strArrOpt[x])
}
}
return str;
}
//点击-编辑表格后的弹出窗口的渲染多列
let colsMoreStr = colsMoreRender(tableColsArr)
$('body').append(editTableCols); //弹出窗口添加到页面中
$('#editTableColsModal .modal-body').html(colsMoreStr)
//获取修改的数据
const getFormData = ()=>{
let strArr = []
$('#editTableColsModal .modal-body .form-group input').each(function(idx,eleItm){
let formName = ''; //获取列名称
let cssName = '' //获cssSelector名称
let $eleItem = $(eleItm);
if(idx%2===0){
formName = $eleItem.val(); //获取列名称
strArr.push(formName)
}else{
cssName = $eleItem.val() //获cssSelector名称
cssSelectorArr.push(cssName)
}
})
return strArr;
}
// 点击-编辑列按钮
$("#editCols").click(function(){
$('#editTableColsModal').show() //打开弹出窗口
})
// 点击-关闭按钮
$(".colseBtn").click(function(){
$('#editTableColsModal').hide() //关闭弹出窗口
})
// 点击-保存按钮
$("#btn_submit").click(function(){
$('#editTableColsModal').hide() //关闭弹出窗口
let renderColHtml = initCols(getFormData())
//渲染到页面上
$('#test_table').html(renderColHtml);
})
//表格-删除列事件函数
$(".modal-body").on('click','.delCol',function(){
if($('#editTableColsModal .panel').length === 1){
alert('至少保留一个列')
return false;
}
$(this).parents('.panel').remove();
})
//添加一列的点击事件
$('#btn_addCol').on('click',function(){
let panelLength = $('#editTableColsModal .panel').length;
let currentPanelNum = panelLength + 1;
$('.modal-body').append(colsRender('新列请重新命名',null,currentPanelNum))
})
//点击 - 运行按钮
$('#run').click(function(){
getData()
})
//点击-获取数据
let dataRange = {}
$('#getDataRange').click(function(){
$('#dataRangeForm input').each(function(idx,item){
dataRange[item.name] = item.value.replace(/\s+/g, '')
})
let startPageIdx = dataRange.startPageIdx1 + dataRange.startPageIdx2 +dataRange.startPageIdx3
let endPageIdx = dataRange.endPageIdx1 + dataRange.endPageIdx2 +dataRange.endPageIdx3
startPageNum = parseInt(dataRange.startPageIdx2)
endPageNum = parseInt(dataRange.endPageIdx2)
run()
})
// 点击-导出Excel
$("#outExcel").click(function(){
let obj = {
htmlElementTable: '#test_table',
excelSaveName: '获取的数据'
}
htmlTableToExcel(obj)
})
let strHtml = '<div id="testHtml"></div>'
let cssStyle = `
#testHtml{
width:100px;
background:blue;
}
`
GM_addStyle(cssStyle)
$('body').append(strHtml)
function getHtml(num){
msg(`正在获取第${num}页`)
let requestUrl = dataRange.startPageIdx1 + num +dataRange.startPageIdx3
$.ajax({
url: requestUrl,
timeout: 30000,
success: function(html){
$('#testHtml').append(html)
msg(`第${num}页加载完成`)
if(num === endPageNum){ //最后一次执行完后获取数据
getData()
}
},
error:function(er){
console.log('er ',er)
},
complete:function(co){
console.log('co ',co)
}
});
}
function run(){
msg('开始获取')
setInterval(function(){
if(startPageNum>endPageNum){
return false;
}
getHtml(startPageNum) //获取页面的html及数据
startPageNum++
},10000)
}
//获取数据的选择器
function getData(){
msg('正在获取全部数据')
let eleTotalColArr = [] //总计
// 获取数据组成二维数组
cssSelectorArr.forEach(function(item,idx){
let eleByColArr = [] //单项
$(item).each(function(idex,ite) {
eleByColArr.push($(ite).text())
})
eleTotalColArr.push(eleByColArr)
})
//把数据组装成html元素
let trs = '' //一行单元格
let totalLIneNum = eleTotalColArr[0].length; //总行数
let fieldNum = eleTotalColArr.length;
for (let i=0;i<totalLIneNum;i++){
let tds = ''
if(isOrderNumber){
tds = `<td>${i+1}</td>`
}
for(let i2 = 0;i2<fieldNum;i2++){
tds += `<td>${eleTotalColArr[i2][i]}</td>`
}
trs += `<tr>${tds}</tr>`
}
//把数据放入表格
$('.table-card tbody').html(trs);
msg(`全部数据获取完成,共计获取${totalLIneNum}条`)
}
//提示信息框
function msg(msgStr){
let msgHtml = ` <div class="loadMsg">${msgStr}•••</div>`
let $msgContent = $('.msgWrap .msgContent');
$msgContent.append(msgHtml).scrollTop($msgContent.prop('scrollHeight'))
}
function htmlTableToExcel(objOptions){
if(!objOptions){
alert("请填写函数调用参数")
return false;
}
let opt = objOptions;
// opt.htmlElementTable 需要转化的htmlTable
// opt.excelSaveName 导出的表格名称
// 1、寻找表格元素
let html_table = document.querySelector(`${opt.htmlElementTable}`)
// 2、创建新的工作簿
const wb = XLSX.utils.book_new()
// 3、将表格元素转sheet表格
const worksheet = XLSX.utils.table_to_sheet(html_table)
// 4、将sheet表添加到工作簿
XLSX.utils.book_append_sheet(wb, worksheet, "Sheet1");
// 5、保存工作簿
XLSX.writeFile(wb, `${opt.excelSaveName}.xlsx`)
}
// Your code here...
})();
📚四、使用此代码的方法：
1.浏览器打开https://developer.mozilla.org/zh-CN/
2.把代码复制进油猴脚本，打开运行开关，刷新页面
- 安装教程：👉 https://blog.csdn.net/qq_33650655/article/details/142097760
- 使用教程：👉 https://blog.csdn.net/qq_33650655/article/details/142183047
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作
文章来源:https://blog.csdn.net/qq_33650655/article/details/142897934
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
标签：
相关文章
最新发布
点击排行
本站推荐
