安卓程序中使用SpreadJS步骤

收藏 · 2024-10-29 15:46 上传

本帖最后由 Winny 于 2024-10-29 15:46 编辑

SpreadJS作为一款纯前端的表格控件，提供基础产品js、css资源包，支持打造BS端、CS端产品应用。本文以安卓开发为例，介绍如何使用安卓平台嵌入SpreadJS能力。

在安卓中，SpreadJS并不能使用原生安卓标签形式，需要使用webview混合开发模式。因此，集成的基础步骤如下：
（1）构建SpreadJS应用
这里，我们可以采用任何一种开发框架来继承SpreadJS，例如React、Vue、原生JS等等。本文以原生js为例，集成了SpreadJS，详细代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>SpreadJS V17 Designer Sample</title>
<meta name="spreadjs culture" content="zh-cn" />
<link href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.17.1.7.css"
rel="stylesheet" type="text/css" />
<link href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.designer.17.1.7.min.css" rel="stylesheet"
type="text/css" />
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.17.1.7.min.js"></script>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.pivot.pivottables.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.tablesheet.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.report.reportsheet.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.formulapanel.17.1.7.min.js"></script>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.io.17.1.7.min.js"></script>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.17.1.7.min.js"></script>
<script
src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.cn.17.1.7.min.js"></script>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.all.17.1.7.min.js"></script>
</head>
<body>
<p>888888</p>
<div id="gc-designer-container" style="width:90vw; height:95vh;border: 1px solid gray;"></div>
</body>
<script type="text/javascript">
window.onload = function () {
GC.Spread.Common.CultureManager.culture("zh-cn");
let designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container")
let spread = designer.getWorkbook()
let sheet = spread.getActiveSheet()
sheet.setValue(0,0,'测试')
}
</script>
</html>

复制代码

（2）嵌入SpreadJS到Webview
将集成了SpreadJS的html文件复制在安卓工程下的assets文件夹下，后续作为静态资源从webview引入。详细的引入代码如下：

package com.example.spreadjs_android
import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
@SuppressLint("SetJavaScriptEnabled")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val myWebView: WebView = findViewById(R.id.webview)
//myWebView.settings.domStorageEnabled = true
myWebView.settings.javaScriptEnabled = true
myWebView.settings.allowFileAccess = true
myWebView.settings.allowContentAccess = true
myWebView.loadUrl("file:android_asset/Locked.html")
//myWebView.loadUrl("https://demo.grapecity.com.cn/SpreadJS/WebDesigner/")
}
}

复制代码

（3）测试打包
在虚拟设备上测试完成后，选中build打包成单个apk即可。在对应手机上安装apk文件，就可以开始体验了。
附件会包含示例工程，可供参考。

		自动登录	找回密码
密码			立即注册

安卓程序中使用SpreadJS步骤

0 个回复