Tampermonkey 中使用 JavaScript 打包下载图片


Tampermonkey 例子:

// 引入插件:另存和压缩打包
// @require      https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js
// @require      https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js

// 批量下载 顺序下载 传入(图片链接数组,对应的带后缀的图片标题数组,文件夹名)
    async function batchDownload(imgsUrl, imgsTitles, folderName) {
      const data = imgsUrl;
      const zip = new JSZip(); // 压缩包
      const promises = [];
      for (let index = 0; index < data.length; index++) { 
        const item = data[index];
        const promise = await getData(item, "blob").then(data => { // 下载文件, 并存成ArrayBuffer对象 // 异步需把 await 去掉
          const file_name = imgsTitles[index]; // 获取文件名
          // (文件名,二进制流,多文件)
          zip.file(file_name, data, {
            binary: true
          }) // 逐个添加文件
          console.log(`第 ${index+1} 张,文件名:${file_name},大小:${parseInt(data.size / 1024)} Kb,下载完成!等待压缩...`);
        }).catch((err) => { 
          // 处理错误 reject;不处理会打断 Promise.all
          console.log(err);
          return -1;
        })
        promises.push(promise);
      }
      Promise.all(promises).then((err) => { // 使用 Promise.all 异步执行
        // 返回 promise 结果数组,处理结果中的错误
        for (let i = 0; i < err.length; i++) {
          if (err[i] == -1) {
            console.log( i + "文件缺失!")
            break;
          }
        }
        zip.generateAsync({
          type: "blob"
        }).then(content => { // 生成二进制流
          saveAs(content, `${folderName} [${data.length}P]`); // 利用 file-saver 保存文件
        })
      })
    };

    // GM_xmlhttpRequest GET异步通用模块
    function getData(url, type = "document", usermethod = "GET") {
      return new Promise((resolve, reject) => {
        GM_xmlhttpRequest({
          method: usermethod,
          url: url,
          responseType: type,
          onload: function (response) {
            if (response.status == 200) {
              resolve(response.response);
            } else {
              reject(response);
            }
          },
          onerror: function (error) {
            console.log("网络错误");
            reject(error);
          }
        });
      });
    }

项目完整代码


文章作者: iKnow
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iKnow !
评论
 上一篇
querySelector 与 getElementById 性能比较 querySelector 与 getElementById 性能比较
1. querySelector 与 getElementById首先我们来比较 querySelector 与 getElementById 的差别,创建测试文件如下: <!DOCTYPE html> <html lang="
2021-07-13
下一篇 
hexo prism 代码高亮问题 hexo prism 代码高亮问题
hexo prism 代码高亮问题hexo-prism-plugin 代码标注只支持小写英文,不支持符号、大写。 prism 支持的语言: https://prismjs.com/#languages-list 小写 #include
2021-07-02