【安卓笔记】记录webView加载Html文本的实操过程

一、使用场景

当产品给出了一篇word文档让你把他按照word文档的格式加载到安卓端上去怎么办？

二、操作步骤

1. 用word转换word文档变成html格式文件##### textView可以做到简单的html文本的识别

tvString.text = Html.fromHtml(
                string,
                Html.FROM_HTML_MODE_COMPACT
            )

2. 在xml添加一个WebView的控件

    <WebView
        android:id="@+id/wv_web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

3. 把html文件存在value/raw文件夹下

4. 在Activity写下这样的神秘代码，就可以直接把html加载上去

 binding?.wvWebView?.settings?.javaScriptEnabled = true // 让webview得以识别style标签
        val resId = R.raw.xxx // resId获取：直接取得raw文件打开
        // resId获取：传字符型的文件名，可以拼接文件
        val resId2 = resources.getIdentifier("content", "raw", packageName)
        val inputReader =
            InputStreamReader(resources.openRawResource(resId), READ_CHARSET_TYPE)
        val bufReader = BufferedReader(inputReader)
        var result = ""
        bufReader.forEachLine {
            Timber.d("line : $it")
            result += it
        }
        System.out.println(result)
        binding?.wvWebView?.loadDataWithBaseURL(null, result, "text/html", READ_CHARSET_TYPE, null)
   

这里loadDataWithBaseURL()这个方法是用来加载在线文档比较快捷的方式

5. 为了配合动态调用htmlloadDataWithBaseURL()还是写成loadUrl()：

it.loadUrl(protocolViewModel.generateHtmlUrl(requireActivity().assets))
            it.webViewClient = object : WebViewClient() {
                override fun onPageFinished(view: WebView?, url: String?) {
                    if (systemIsNight) {
                        view?.loadUrl("javascript:load_night();")
                    } else {
                        view?.loadUrl("javascript:load_day();")
                    }
                }
            }

范例：loadUrl(file:///android_asset/xxx.html)
故，这种写法的html文件要放在assets目录下

6. viewModel中generateHtemlUrl方法详情：

fun generateHtmlUrl(assetManager: AssetManager): String {
        val fileName = FILE_NAME + FILE_PATH_END // 此处fileName拼接出，存在assets文件夹中的文件名：xxx.html;
        val fileExist = FileUtil.assetFileExists(
            fileName,
            PROTOCOL_FILES_RELATIVE_PATH,
            assetManager
        ) // 确保文件存在再打开文件
		
        val filePath = if (fileExist) {
            ASSET_FILE_PATH_START + fileName // 确定文件存在后返回文件所在的路径，拼出来最终效果：file:///android_asset/xxx.html
        } else {
            ASSET_FILE_PATH_START + DEFAULT_FILE_NAME + FILE_PATH_END // 文件不存在则返回默认要打开的文件
        }
        return filePath
    }

7. 确定文件存在的 FileUtil.assetFileExists方法：

object FileUtil {
    /**
     * 查看assets文件夹中，是否存在这个文件
     */
    fun assetFileExists(fileName: String, filePath: String, assetManager: AssetManager): Boolean {
       val result = kotlin.runCatching {
           val fileNameList = assetManager.list(filePath)
           if (fileNameList.isNullOrEmpty()) {
               Timber.w("file: files empty; $filePath/$fileName; size:${fileNameList?.size}")
               return false
           }
           if (fileNameList.find {it.equals(fileName) }.isNullOrEmpty()) {
               Timber.w("file: file not found; $filePath/$fileName")
               return false
           }
           return true
       }.onFailure {
           Timber.e("file: AssetManager fail, msg:${it.message}; $filePath/$fileName")
           return false
       }.getOrDefault(false)
        return result
    }
}

三、进阶处理：

1. 多语言的文本该如何根据系统语言进行选取？

获取车机的系统语言，根据一套定义好的判断方式把语言按编号排列，然后用上方获取resId2的方式拼出html的文件名。
比如：xxx_1 代表中文； xxx_2代表英文

2. 直接加载的是word文档里的样式，不符合车机本身的昼夜模式如何处理？

方案一：存两套html，根据系统昼夜模式，拼名字获取对应文本。
方案二：在html中设置js代码，让代码适配系统：

 <script language=javascript>
             function load_night()
             {
                var nightColor = 'yellow'
                var spans = document.getElementsByTagName('span');
                var table = document.getElementsByTagName('td');
                for(var i = 0; i < spans.length; i++) {
                    spans[i].style.color = nightColor; // 设置字体颜色
                }
                for(var i = 0; i < table.length; i++) {
                    table[i].style.borderColor = nightColor; // 设置表格颜色
                }
             }

    </script>

    <script language=javascript>
             function load_day()
             {
                var dayColor = 'yellow'
                var spans = document.getElementsByTagName('span');
                var table = document.getElementsByTagName('td');
                for(var i = 0; i < spans.length; i++) {
                    spans[i].style.color = dayColor; // 设置字体颜色
                }
                for(var i = 0; i < table.length; i++) {
                    table[i].style.borderColor = dayColor; // 设置表格颜色
                }
             }

    </script>

3. 如果字体和表格边框的颜色需要透明度：

<script language=javascript>
         function load_night()
         {
            var nightColor = 'yellow'
            var opacityNum = 0.85;
            var borderColorAndOpacity = "rgba(111, 222, 121, 0.85)";
            var spans = document.getElementsByTagName('span');
            var table = document.getElementsByTagName('td');
            for(var i = 0; i < spans.length; i++) {
                spans[i].style.color = nightColor; // 设置字体颜色
                spans[i].style.opacity = opacityNum;
            }
            for(var i = 0; i < table.length; i++) {
                table[i].style.borderColor = borderColorAndOpacity; // 设置表格颜色
            }
         }
</script>

四、其他注意事项

1. 个别字符有乱码的情况在以下网址单独转换替换例如

https://www.textfixer.com/html/convert-text-html.php

字符	替换
中文左引号	“
中文右引号	”