Android中如何将HTML字符串缓存为文件并在WebView中加载

问题场景 #

从API获取HTML格式字符串后，将其保存到应用缓存目录，但通过htmlFile.absolutePath获取路径加载到WebView时，出现“网页不可用”错误。已知将HTML文件放在assets目录，通过"file:///android_asset/test.html"可正常加载。相关代码如下：

/*htmlString is the string obtain from api response is in html format like 
 * <!DOCTYPE html>
    <html>
        <head>
            <title> <!-- title bar --> </title>
            <!-- header for the website -->
        </head>
        <body>
            <!-- body section of the website -->
        </body>
    </html>
 */
val htmlFile = File(
    mContext.cacheDir,
    System.currentTimeMillis().toString() + ".html"
)
val out = FileOutputStream(htmlFile)
val data: ByteArray = htmlString.toByteArray()
out.write(data)
out.close()
val htmlFilePath = htmlFile.absolutePath // Loading this in WebView Shows Error Webpage is not available
requireActivity().apply {
    val intent= Intent(this, WebviewActivity::class.java)
    intent.putExtra("title", "Dummy Title")
    intent.putExtra("url", htmlFilePath)
    startActivity(intent)
}

解决方案 #

1. 补充file://协议前缀 #

WebView加载本地文件需要完整的file://协议路径，直接传入绝对路径会被识别为无效URL。修改代码如下：

// 拼接file://前缀
val htmlFileUrl = "file://${htmlFile.absolutePath}"
intent.putExtra("url", htmlFileUrl)

在WebViewActivity中加载：

val url = intent.getStringExtra("url")
webView.loadUrl(url)

2. 直接加载HTML字符串（无需保存文件） #

既然已经持有完整的HTML字符串，无需写入文件，直接用WebView的API加载，更高效且避免文件路径问题：

方法一：使用loadDataWithBaseURL（推荐）

该方法支持处理HTML中的相对路径，同时指定字符编码避免乱码：

// 在WebViewActivity中直接加载字符串
val htmlString = intent.getStringExtra("html_content") // 改为传递HTML字符串
webView.loadDataWithBaseURL(null, htmlString, "text/html", "UTF-8", null)

调用方修改为传递字符串而非文件路径：

intent.putExtra("html_content", htmlString)

方法二：使用loadData

注意该方法需要对特殊字符转义，否则可能出现加载异常：

webView.loadData(htmlString, "text/html", "UTF-8")

3. 确保WebView基础配置正确 #

检查WebView是否启用必要配置，避免加载失败：

webView.settings.apply {
    // 若HTML需要JS交互，启用JavaScript
    javaScriptEnabled = true
    // 允许加载本地文件
    allowFileAccess = true
}
// 设置WebViewClient，避免跳转到系统浏览器
webView.webViewClient = WebViewClient()

4. 验证文件写入完整性（可选） #

若上述方法无效，可检查文件是否成功写入及内容是否正确：

// 验证文件内容
val savedContent = htmlFile.readText()
Log.d("HTML_CHECK", "Saved content: $savedContent")

内容的提问来源于stack exchange，提问作者Suman Radhakrishnan