Android保存网页的方法

首先要使用js交互就需要懂原理：

感谢大佬：js中document节点获取页面元素的六种方式

1.querySelector()方法

描述：本方法用于根据给定的选择器选中页面元素

如果有多个元素满足条件，则返回第一个满足条件的元素节点

语法：document.querySelector('选择器名');

注意：如果查找失败，返回null

2.querySelectorAll()方法

描述：本方法用于根据给定的选择器选中页面元素

如果有多个元素满足条件，则返回这些元素构成的集合

语法：document.querySelectorAll('选择器名');

注意：

(1)返回的结果是一个节点列表，不是数组，但能够像使用数组一样使用列表

(2)如果查找失败，返回一个空的节点列表(.length==0)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>document节点获取页面元素</title>
    </head>
    <body>
        <div id="div">我是第一个div</div>
        <div class="div">我是第二个div</div>
        <div>我是第三个div</div>
        <p>我是p标签</p>
        <h2>我是h2标签</h2>
        <button name="aaa">我是button</button>
    </body>
    <script type="text/javascript">
        var div = document.querySelector('#div');
        console.log(div); //<div class="div">我是第二个div</div>
        
        var div = document.querySelector('div');
        console.log(div); //<div id="div">我是第一个div</div>
        
        var divList = document.querySelectorAll('div');
        console.log(divList); //NodeList(3) [div#div, div.div, div]
        console.log(divList[1]); //<div class="div">我是第二个div</div>
        console.log(divList.length); //3    
    </script>
</html>

3.getElementById()方法

描述：根据指定的id名选中页面元素

如果存在多个指定满足条件元素，则返回第一个元素节点

语法：document.getElementById('id名');

注意：如果查找失败，返回null

4.getElementsByClassName()方法

描述：根据指定的类名选中页面中所有满足条件的元素

语法：document.getElementsByClassName('类名');

注意：返回结果是一个有顺序的节点列表，可以通过索引来访问列表中的元素(索引从0开始)

5.getElementsByTagName()方法

描述：根据指定的标签名选中页面中所有满足条件的元素

语法：document.getElementsByTagName('标签名');

注意：如果参数值为'*',则返回文档中的所有元素

6.getElementsByName()方法

描述：根据指定的name值选中页面中所有满足条件的元素

语法：document.getElementsByName('name属性');

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>document节点获取页面元素</title>
    </head>
    <body>
        <div id="div">我是第一个div</div>
        <div class="div">我是第二个div</div>
        <div>我是第三个div</div>
        <p>我是p标签</p>
        <h2>我是h2标签</h2>
        <button name="aaa">我是button</button>
    </body>
    <script type="text/javascript">
        var a = document.getElementById('div');
        console.log(a); //<div id="div">我是第一个div</div>
        
        var b = document.getElementsByClassName('div');
        console.log(b); //HTMLCollection [div.div]
        
        var c = document.getElementsByTagName('p');
        console.log(c); //HTMLCollection [p]
        
        var d = document.getElementsByName('aaa');
        console.log(d); //NodeList [button]        
    </script>
</html>

然后，使用python也可以，但是作为Android开发，学习新的语言配置环境也是有成本的，自己写的虽然丑但是够用，所以，以下：

Kotlin 复制代码

        mWebView?.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView, url: String) {
                mWebView?.evaluateJavascript("document.getElementsByTagName('html')[0].innerHTML;") { value ->
                    Log.e("aaaaa", "load:${url}")
                    if (lastUrl == url) {
                        var title = url.substring(url.lastIndexOf("/"), url.length)
                        mWebView?.evaluateJavascript("document.getElementsByClassName('article-title text-center')[0].innerHTML;") { titleStr ->
                            if (titleStr.isNotEmpty()) {
                                title = titleStr
                                    .replace("\"", "")
                                    .replace("?", "")
                                    .replace("？", "")
                                    .replace("\\n", "")
                                    .replace("/", "、")
                            }
                        }
                        mWebView?.evaluateJavascript("document.getElementById('article-content').innerHTML;") { contentStr ->
                            val file = File(
                                Environment.getExternalStorageDirectory()
                                    .toString() + File.separator + "html/" + "$title.html"
                            )
                            val content = contentStr
                                .replace("\\u003C", "<")
                                .replace("\\n", "")
                                .replace("\\\"", "\"")
                            val fw = FileWriter(file)
                            fw.write(getHtmlData(content))
                            fw.close()
                            Log.e("aaaaa", "${file.absolutePath}保存成功！")
                            endCheck()
                        }
                    } else if (value.contains("你访问的资源找不到了")) {
                        Log.e("aaaaa", "${url}页面无法访问。。。")
                        endCheck()
                    }
                    lastUrl = url
                }
                super.onPageFinished(view, url)
            }
        }



    fun getHtmlData(bodyHTML: String?): String {
        val head = "<head>" +
                "<meta charset=\"utf-8\">" +
                "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,user-scalable=no\">" +

                "<style>" +
                "table {font-size: 14px !important;width: 100% !important;" +
                "text-align: center;border: 1px solid #dee2e6;border-collapse: collapse;border-spacing: 0;}" +

                "table td {border: 1px solid #dee2e6;padding: 0 !important;width: auto !important;" +
                " word-wrap: break-word;word-break: break-all;overflow: hidden;text-align: center !important;vertical-align:middle !important;}" +
                "table td span {font-size: 14px !important;text-align: center !important;vertical-align:middle !important;}" +
                "p {font-size: 14px !important;}" +
                "</style>" +

                "</head>"
        return "<html>$head<body><div style=\"overflow: auto;font-size: 14px !important;width: 100% !important;\">$bodyHTML</div></body></html>";
    }

只是能完成任务，没有仔细打磨，很粗糙，不过还是那句话，丑但是够用，需要的话可以打磨一下，就没有那么丑了。