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开发,学习新的语言配置环境也是有成本的,自己写的虽然丑但是够用,所以,以下:

        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>";
    }

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值