最近发现一个好玩的项目，在某平台看电子书籍时，发现了本地可以爬取该平台的相关资源，
每次加载，在本地都会有一个静态的html文件，以及其它的资源文件：图片资源、css样式文件等
因为图片资源有太多，不像其它脚本文件或者html文件直接复制一次就完事，需要一次一次手动另存为，因此诞生了一个想法，就是写一个脚本让电脑自己去下载。

基于vue/cli脚手架做的，因为跨域好解决 哈哈哈

粗糙的界面

1
2
3
4
5
6
7
8
<template>
  <div class="hello">
    <img src="photos/books/mobile/e2/e2924acd456e36e8a71d9a79d04a69b4/Image00006.jpg" alt="">
    <a id="obj" :href="url" :download="Photoname">下载</a>
    <button @click="getPhotoData">自动下载开始</button>
    <button @click="stopPhotoData">停止下载</button>
  </div>
</template>

操作界面操作界面

尚欠火候的脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
import axios from "axios"
export default {
  name: 'HelloWorld',
  data:function(){
    return{
      photoData:[],
      desNumber:"",
      count:1,
      Photoname:"",
      flag:0
      
    }
  },
  mounted:function(){
   console.log(document.getElementById("obj"))
  },
  computed:{
    url:{
        get(){
           console.log("触发")
           return "photos/books/mobile/e2/e2924acd456e36e8a71d9a79d04a69b4/Image"+this.desNumber+".jpg"
        }
    }
  },
  methods:{
    getPhotoData(){
         this.flag=setInterval(()=>{
              if(this.count<10){
              this.desNumber="0000"+this.count;
               this.downloadData();
              // console.log(this.desNumber)
              // console.log("小于10");
              // console.log(this.url);
              //  this.photoData.push(this.url);
              this.count++;
              }
              else if(this.count>=10&&this.count<100){
                this.desNumber="000"+this.count
               this.downloadData();
                // this.photoData.push(this.url);
                //  console.log(this.desNumber)
                // console.log("大于10小于100");
                // console.log(this.url);
                 this.count++;
              }
              else if(this.count>=100){
                this.desNumber="00"+this.count
                //  console.log(this.desNumber)
                // console.log("大于等于100");
                // console.log(this.url);
               this.downloadData();
                 this.count++;
              }
              else{
                alert("出错了")
              }
        },1000)
    },
    stopPhotoData(){
      clearInterval(this.flag);
     
    },
    downloadData(){
      document.getElementById("obj").click();
    }
  }
}
</script>

前端跨域

在项目下新建一个文件 vue.config.js,内容代码如下：设置了代理到本地，解决了前端跨域


1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports={
    devServer:{
        host:"0.0.0.0",
        proxy:{
            "/photos":{
                target:"http://reader.epubee.com",
                changeOrigin:true,
                pathRewrite:{
                    "/photos":""
                }
            }
        }
    }
}

根据以上内容就完成了，对图片的自动化下载。

备注：要看下载图片名称之间的联系，这次我下载的图片都是固定的名称+升序的序号，所以算是比较幸运