安卓利用WebView显示TeX及网页数据-CSDN博客

1.什么是TeX

TEX被普遍认为是一个优秀的排版工具，特别是在处理复杂的数学公式时。
利用诸如是LATEX等终端软件，TEX就能够排版出精美的文本以帮助人们辨认和查找。

通俗的说,Tex就是一个可以利用文本显示复杂的符号的一个文本格式语言,和解析工具.
他能让我们方便的让我们在网页上显示各种公式及特殊符号.
复制代码

例子:

2.如何解析TeX

Katex是一个快速易于使用的TeX javaScript 数学符号渲染脚本.
这里我们使用Katex来进行数学公式的渲染
复制代码

3.如何把服务器传过来的数据利用本地的html模版进行渲染

由于服务器传过来的是json数据,数据量不能太大,所以我们需要把整个网页关于解析部分放到安卓本地.然后由服务器传递过来数据的实际内容部分.
复制代码

html模版

index.html
<html>
<head>
    <link rel="stylesheet" href="katex.min.css"/>
    <script defer src="katex.min.js"></script>
    <script defer src="auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" ></script>
    <script>
        function addBody(a){
            document.getElementById("aaa").innerHTML=a;
            render();
        }

        function render(){
            renderMathInElement(document.body);
        }

    </script>
</head>

<body id="aaa">
</body>
</html>
复制代码

其他文件也放到assets目录下

目录如下图:

其中fonts和css,还有js文件请从如下地址中获得

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  ...
</html>
复制代码

fonts文件也请自己从css文件中获取地址.

安卓端操作

package com.example.daquexian.flexiblerichtextview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private WebView v;
    private Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        v = (WebView) findViewById(R.id.webView);
        button = (Button)findViewById(R.id.b) ;
        v.getSettings().setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        v.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        v.loadUrl("file:///android_asset/index.html");
        final String s = "1123<br /><span class=\\\"math-tex\\\">\\\\(x = {-b \\\\pm \\\\sqrt{b^2-4ac} \\\\over 2a}\\\\)</span><div></div><div></div><table border=\\\"1\\\" cellpadding=\\\"1\\\" cellspacing=\\\"1\\\" style=\\\"width:500px;\\\">\n" +
                "<tbody><tr><td>asd</td><td>asd</td></tr><tr><td>asd</td><td>asd</td></tr><tr><td>asd</td><td>asd</td></tr>\n" +
                "</tbody>\n" +
                "</table><br /><img alt=\\\"\\\" src=\\\"https://img1.zhiupimg-d.cn/group1/M00/10/44/CpsxFFuN9NSAG_94AACrQJtXzYg069.jpg\\\" style=\\\"width: 450px; height: 484px;\\\" /><br />hehehe";
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                v.loadUrl("javascript:addBody('"+s+"')");
            }
        });
    }
}
复制代码

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    >

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--<com.daquexian.flexiblerichtextview.FlexibleRichTextView-->
            <!--android:id="@+id/frtv"-->
            <!--android:visibility="gone"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="wrap_content"/>-->
        <Button
            android:id="@+id/b"
            android:text="ddddddd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</RelativeLayout>

复制代码