ElementUI离线到本地使用

Jsoup实现离线ElementUI

---

最近想学ElementUI的前端框架，听说跟Vue能够完美结合，做出来的样式和效果也都很不错。但我不太习惯在线使用，更多的喜欢离线下来再慢慢学。找了好久都没有找到能离线的资源，网上也有写爬虫去爬下来的，我看了一下，感觉对我不太友好，刚好自己这两天也了解了Jsoup的用法，所以自己动手用java写了个不算是爬虫的爬虫，能够完整下载ElementUI。

---

代码如下：

package jsoup;

import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import org.jsoup.Connection;
import org.jsoup.Connection.Response;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class ElementUIDownload {

	static Document document;
	static String savePath = "D:/";
	static Connection connect;
	static String version = "2.13.0";
	static List<String> baseUrls;

	static {
		baseUrls = new ArrayList<String>();
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/directives/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/locale/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/locale/lang/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/mixins/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/theme-chalk/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/theme-chalk/fonts/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/umd/locale/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/utils/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/utils/menu/");
		baseUrls.add("https://unpkg.com/browse/element-ui@" + version + "/lib/utils/popup/");
	}

	public static void downLoad(List<String> urls) {
		for (String url : urls) {
			File file = new File(savePath + url.substring(url.indexOf("/element-ui@") + 1));
			if (!file.exists()) {
				try {
					file.createNewFile();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			try {
				Response response = Jsoup.connect(url).proxy("10.167.32.133", 8080).ignoreContentType(true)
						.timeout(100000).execute();
				FileWriter writer = new FileWriter(file);
				writer.write(response.body());
				writer.flush();
				writer.close();
				System.out.println("download OK｡" + url);
			} catch (IOException e) {
				System.err.println("download Failed｡" + url);
				e.printStackTrace();
			}
		}
		System.out.println("download All OK｡");
	}

	public static List<String> getAllJS(String url) {
		List<String> downLoadUrls = new ArrayList<String>();
		try {
			connect = Jsoup.connect(url).proxy("10.167.32.133", 8080).ignoreContentType(true);
			document = connect.get();
		} catch (IOException e) {
			e.printStackTrace();
		}
		Elements elements = document.select("td .css-xt128v");
		for (Element element : elements) {

			if (!element.absUrl("href").endsWith("/")) {
				downLoadUrls.add(element.absUrl("href").replace("/browse", ""));
			} else {

			}
		}
		return downLoadUrls;
	}

	public static boolean mkDirsByUrls(List<String> urls, String savePath) {
		File file = new File(savePath);
		if (!file.exists()) {
			file.mkdirs();
		}

		for (String url : urls) {
			String dir = savePath + url.substring(url.indexOf("/element-ui"), url.lastIndexOf("/"));
			File saveDir = new File(dir);
			if (!saveDir.exists()) {
				saveDir.mkdirs();
			}
		}
		return true;
	}
}

---

多线程调用下载

---

package jsoup;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Callable;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.Future;

public class ThreadPoolDownload implements Callable<Boolean> {

	private List<String> urls;
	public ThreadPoolDownload(List<String> urls) {
		this.urls = urls;
	}
	@Override
	public Boolean call() throws Exception {
		ElementUIDownload.downLoad(urls);
		return true;
	}
	
	public static void main(String[] args) {
		ElementUIDownload.mkDirsByUrls(ElementUIDownload.baseUrls, ElementUIDownload.savePath);
		List<ThreadPoolDownload> downloadThreadList = new ArrayList<ThreadPoolDownload>();
		for (String baseUrl : ElementUIDownload.baseUrls) {
			downloadThreadList.add(new ThreadPoolDownload(ElementUIDownload.getAllJS(baseUrl)));
		}
		ExecutorService executorService = Executors.newFixedThreadPool(downloadThreadList.size());
		for (ThreadPoolDownload threadPoolDownload : downloadThreadList) {
			Future<Boolean> f = executorService.submit(threadPoolDownload);
			try {
				if (f.get()) {
					System.out.println("OK---------------------");
				}
			} catch (InterruptedException e) {
				e.printStackTrace();
			} catch (ExecutionException e) {
				e.printStackTrace();
			}
		}
		executorService.shutdown();
	}
}

可能写的有点儿low，本来想用递归去实现的，结果琢磨了半天终究还是没把递归整明白，只好这样先凑活了。可以修改版本号下载，使用多线程提高下载速度。

你们运行完毕之后，可以去对应的路径下去看一下，如果有文件大小为0的文件，可以手动去这个网站copy进文件中。https://unpkg.com/browse/element-ui@2.13.2/lib/

---

---

以element-ui/lib/alert.js为例，点击后如上图所示，然后点击图中框起来的按钮，就能拿到下面的源码，然后ctrl+a全选复制进对应的文件就可以了。如果大家能帮我改成递归的形式，我觉得就更好了。

---

最后欢迎大家留言进行讨论，需要完整的ElementUI离线包的朋友可以留下你的联系方式，我私下发给你。此作品为原创，转载请注明出处。