网页JS自动化脚本(九)创建一键导出数据库到桌面的功能按钮

• 我们获取到了数据库,当然我们希望能把这个数据库给保存到本地电脑上进行一些数据的处理,我们这一节就添加一个按钮把数据一次性导出
  
• 保存到桌面为json格式
  
• 我们直接用TXT打开它如下图所示
  
• 然后再使用json转EXCEL的小工具规整之后如下图
  
• 好了我们下面上代码

// ==UserScript==
// @name        New script - baidu.com
// @namespace   Violentmonkey Scripts
// @match       https://www.baidu.com/
// @grant       none
// @version     1.0
// @author      -
// @description 2023/5/29 下午2:12:47
// ==/UserScript==

var time,reSou;//时间和热搜
var db;//数据库
var show="";//要显示的内容

window.onload=function(){
  var request = window.indexedDB.open('ShuJuKu',1);
  
  //更新数据库函数
  request.onupgradeneeded = function (event){
    db = event.target.result;
    var objectStore;
    if(!db.objectStoreNames.contains('BiaoGe')){
      objectStore = db.createObjectStore('BiaoGe',{keyPath:'TIME'});
      objectStore.createIndex('reSou','RS',{unique:false});
      alert('BiaoGe 首次创建成功');
    }
  }
  
  //打开数据库函数
  request.onsuccess = function (event) {
    db = request.result;
    show +='ShuJuKu  数据库打开成功\n';
    time=new Date().toLocaleString();
    reSou=document.querySelector("i.title-content-top-icon+span").innerText;
    db.transaction(['BiaoGe'],'readwrite').objectStore('BiaoGe').add({
      TIME:time,  RS: reSou
    });
  }
  
  //导出数据库函数
  function outToJson(){
    var request=indexedDB.open('ShuJuKu');  //打开数据库
    request.onsuccess=function(event){
      db=event.target.result;
      //获取全部表格数据
      var request=db.transaction(db.objectStoreNames,'readonly').objectStore('BiaoGe').getAll();//transaction是数据库事务处理函数,db.objectStoreNames,'readonly'对表格进行只读操作.objectStore('BiaoGe')获取到当前表格.getAll()获取全部数据
      request.onsuccess=function(event){
        //转传参为BLOB
        var data=event.target.result;//获取传参对象
        var dataString = JSON.stringify(data,null,"\t"); //转对象为字符串,第二参数可设置匹配函数也可省略,第三个参数为输出格式也可省略,若填数字为左缩进量,若填写"\t"为回车等
        var blob = new Blob([dataString], {type: 'application/json'});//创建二进制大对象BLOB 第一个参数要用中括号表示数组,第二参数设置字符串格式为application/json
        
        //创建超链接元素并关联二进制大对象BLOB并下载它
        var a = document.createElement('a');  //创建元素
        a.href = window.URL.createObjectURL(blob);  //创建基于BLOB的URL并绑定在元素上
        a.download = '导出文件名.json';  //设置默认下载文件名
        document.body.appendChild(a).click(); //添加链接元素并点击链接
        window.URL.revokeObjectURL(url); //回收链接
        a.remove(); //回收元素
      };
    };
  }
  
  //在右下角创建一键导出数据库到桌面的按钮
  var theButton=document.createElement("div");//创建div容器元素
  theButton.innerHTML='<button  type="button" style="position:fixed;right:0;bottom:0;z-index:1500">导出表格</button>';//在div中添加一个button按钮并将其置顶
  document.body.appendChild(theButton).onclick=function(){ //把div元素置入最后并为其绑定鼠标单击事件
    outToJson();  //绑定导出数据库函数
  }
}

• 大概思路就是获取全部数据并打包创建统一资源定位符(URL),然后下载这个URL即可