盈帆报表-Webassembly下的在线设计器(报表工具)webassembly介绍 webassembly(简称wasm)是一种基于堆栈虚拟机的二进制指令格式。webassembly用于编译C/C++/Rust等高级语言,生成一个可移植的目标,使客户端与服务器程序可部署到Web上。 webassembly堆栈机器设计成一种体积合适,可快速加载的二进制格式。webassembly的初衷是利用多种平台上可用的通用硬件功能,达到以本地速度执行。 目前此技术基本成熟,主流浏览器Chrome、Edge、Firefox、Safari的最新版本已支持webassembly。国内外webassembly的主要应用领域有Google Earth,Figma设计工具,大型游戏引擎,图像处理等。 Qt的webassembly技术支持 Qt在5.13版本中,正式支持webassembly技术。 在CentOS7中搭建开发环境 CentOS7安装webAssembly前,首先需要安装CMake,GCC,Python 2.7.x.,node等工具。之后安装emscripten,emscripten的安装过程较慢,安装时长取决于网络速度。 在以上工具安装成功后,我们以QT5.12.2作为示例,说明搭建过程。从QT官网下载并安装QT5.12.2源码,进入emsdk目录,运行“source ./emsdk_env.sh”,进入5.12.2/Src/qtbase源码目录,输入“./configure -xplatform wasm-emscripten -developer-build -release -static -no-feature-thread -nomake tests -nomake examples -no-dbus -no-headersclean -no-ssl -no-warnings-are-errors”进行配置,再make操作,最后在5.12.2/Src/qtbase/bin目录下生成支持webassembly的qmake文件。此时,Qt的webassembly开发环境搭建完成。 具体安装过程参考: https://blog.csdn.net/qq_25745863/article/details/82682127 。 Qt5.12.2开发webassembly程序 Qt5.12.2开发webassembly程序,是以静态链接文件编译方式,链接Qt自己的库文件以及开发者类库文件后生成wasm。 在Qt c++与js函数之间的相互调用 js调用c++接口:xxx.js文件中生成了名为Module的对象,此对象包含了在web插件中使用webassembly提供的C接口方式提供的接口函数,js可直接通过Module对象进行Qt接口的调用。例如:在Qt中导出一个verNo函数,extern "C" { c++中调用js函数:emscripten提供了多个类似于EM_ASM_的函数,可直接调用js对象中的函数。例如:js中有对象:var TestEvent={ 开发过程遇到的那些坑 目前webassembly开发还有一定限制,如不能访问本地文件、不能实现多线程、不能使用本地剪贴板、不能进行网络编程等。在具体开发过程中webassembly与js必须相互辅助,webassembly实现图形及核心算法等功能,js完成本地文件的读取、与后台进行交互等功能,以此为基础实现web插件的主体框架。 1、资源问题 webassembly设计原理是独立虚拟机方式运行,需要使用完全独立的资源。对于资源的处理通常是通过Qt工程加载到web插件中,但这样最终导致生成的wasm文件过大,实际加载时间过长,再加上网络影响,用户体验很差。实际情况中一些资源也需要动态加载,为了解决资源问题,在Qt程序中只加载一些必要的资源文件,其他非必需资源通过js动态从后台加载,调用webassembly提供的接口方式,将资源文件以字节流方式传入到web插件中,用这种方式达到动态加载资源的效果。 2、中文输入问题 Qt5.12.2所编译的web插件自身是无法输入中文的,解决此问题,需要使用html的编辑框。在web插件中需要输入的地方调用js接口,发送事件,前端响应事件,将编辑框显示出来,前端的编辑框可以响应本地的输入法,中文输入后,再将文本通过接口回传到web插件中,并将编辑框隐藏,这样解决中文输入问题。 3、剪贴板问题 由于webassembly目前不能与本地剪贴板进行交互,只能通过调用js的方式。粘贴操作时无法判断来源是webassembly自己的剪贴板内容还是外部的,所以粘贴操作统一取自于外部剪贴板。采用这一机制后,webassembly内部的复制操作,需要将内部数据复制到外部剪贴板并在内容中标识是内部数据,粘贴时再判断其数据是来源于内部还是外部完成粘贴操作。 随之Webassembly的技术完善,这些问题解决起来会越来越方便。 web报表设计器 盈帆报表设计器是基于Qt平台和Webassembly技术的在线报表设计器。该报表设计器使用C++语言,web上的运行效率可以得到保证。在报表设计上,避免了在客户端安装桌面设计器、制作好模板后上传服务器的繁琐,加快了预览速度。预览效果与实际报表平台上显示效果一致,使报表的设计流程更加简洁方便,大大减少了报表制作花费的时间。不仅如此,Windows、Linux、MacOS下,在浏览器运行方式下,真正实现跨平台操作。 盈帆报表设计器是全国率先在报表领域使用webassembly技术的应用实例。
|