Android WebView中Google Sheets显示格式异常问题求助

我之前也踩过WebView加载Google Sheets的坑，只显示标题没内容大概率是WebView的默认配置不满足Google Sheets的网页要求，加上可能用错了链接类型，咱们来一步步调整解决：

第一步：确认使用正确的Google Sheets链接 #

你如果用的是普通的编辑/查看链接（比如https://docs.google.com/spreadsheets/d/xxx/edit），WebView里可能因为缺少登录会话或者移动端视图限制导致无法正常加载内容。正确的做法是把表格发布到网页：

• 打开你的Google Sheets，点击右上角「分享」→「发布到网页」
• 选择要展示的工作表，格式选「网页」，复制生成的发布链接，用这个链接来加载

第二步：调整WebView的核心配置 #

默认的WebView没有启用JavaScript和DOM存储，而Google Sheets的内容渲染完全依赖这些特性。修改你的加载代码如下：

原代码对比 #

你原来的加载逻辑：

override fun onViewCreated(view: View?, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    webview.webViewClient = WebViewClient()
    webview.loadUrl("my sheets url here")
    webview.refreshDrawableState()
}

修改后的完整代码 #

override fun onViewCreated(view: View?, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    
    // 配置WebView的核心设置
    val webSettings = webview.settings
    webSettings.javaScriptEnabled = true // 必须启用JS，Google Sheets完全依赖它
    webSettings.domStorageEnabled = true // 启用DOM存储，保存页面会话状态
    webSettings.loadWithOverviewMode = true // 让页面适配WebView宽度
    webSettings.useWideViewPort = true // 支持宽视图，避免内容被裁剪
    // 设置桌面端User Agent，避免Google返回简化的移动端视图
    webSettings.userAgentString = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36"
    
    // 设置WebViewClient，强制在当前WebView内打开链接
    webview.webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
            url?.let { view?.loadUrl(it) }
            return true
        }
    }
    
    // 加载发布后的Sheets链接
    webview.loadUrl("你的Google Sheets发布链接")
}

配置说明 #

• javaScriptEnabled = true：Google Sheets的内容渲染、交互逻辑全靠JS，必须开启
• domStorageEnabled = true：保存页面的会话状态，避免加载中途丢失数据
• loadWithOverviewMode + useWideViewPort：让表格自适应WebView宽度，避免横向滚动或内容被截断
• 自定义User Agent：强制使用桌面端UA，避免Google Sheets返回仅显示标题的简化移动端视图

你的布局代码无需修改 #

检查了一下你的布局XML，这个配置是正常的，不用调整：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:name="com.example.grant.gradechaser.fragment.ClimbListFragment"
    android:orientation="vertical" >
    <TextView android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/AppTheme.myListTitle"
        android:background="@color/colorPrimary"
        android:text="10 unsynced climbs"/>
    <WebView android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

补充排查点 #

如果还是没显示内容：

• 先在手机浏览器里打开你的发布链接，确认内容能正常显示
• 检查AndroidManifest.xml里是否添加了网络权限：<uses-permission android:name="android.permission.INTERNET" />
• 若使用Android 9及以上版本，且链接是http协议，需开启混合内容支持：webSettings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW

你之前遇到的异常显示效果：

按照上面的步骤调整后，应该就能正常显示完整的表格内容了。

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