让数据成为企业发展的驱动力
搜索

盈帆报表-Webassembly下的在线设计器(报表工具)

webassembly介绍

webassembly(简称wasm)是一种基于堆栈虚拟机的二进制指令格式。webassembly用于编译C/C++/Rust等高级语言,生成一个可移植的目标,使客户端与服务器程序可部署到Web上。

webassembly堆栈机器设计成一种体积合适,可快速加载的二进制格式。webassembly的初衷是利用多种平台上可用的通用硬件功能,达到以本地速度执行。

目前此技术基本成熟,主流浏览器Chrome、Edge、Firefox、Safari的最新版本已支持webassembly。国内外webassembly的主要应用领域有Google Earth,Figma设计工具,大型游戏引擎,图像处理等。


Qtwebassembly技术支持

Qt在5.13版本中,正式支持webassembly技术。


在CentOS7中搭建开发环境

CentOS7安装webAssembly前,首先需要安装CMakeGCC,Python 2.7.x.,node等工具。之后安装emscriptenemscripten的安装过程较慢,安装时长取决于网络速度。

在以上工具安装成功后,我们以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目录下生成支持webassemblyqmake文件。此时,Qtwebassembly开发环境搭建完成。

具体安装过程参考:            https://blog.csdn.net/qq_25745863/article/details/82682127   

Qt5.12.2开发webassembly程序

Qt5.12.2开发webassembly程序,是以静态链接文件编译方式,链接Qt自己的库文件以及开发者类库文件后生成wasm

Qt
Creator中,新建一个Qt Widgets Application工程,打开命令行,进入emsdk目录,执行source ./emsdk_env.sh,再进入到新建工程的目录,使用emsdk环境下编译好的qmake编译此工程,生成Makefile文件,执行make编译,生成qtloader.js、qtlogo.svg、xxx.html、xxx.js、xxx.wasm等文件。使用firefox浏览器打开xxx.html,直接在网页上看到使用Qt编写的webassembly的web插件。


c++js函数之间的相互调用

js调用c++接口:xxx.js文件中生成了名为Module的对象,此对象包含了在web插件中使用webassembly提供的C接口方式提供的接口函数,js可直接通过Module对象进行Qt接口的调用。例如:在Qt中导出一个verNo函数,extern "C" {
EMSCRIPTEN_KEEPALIVE const char* verNo();},编译生成的xxx.js文件中会生成_verNo函数,Js中可直接调用Module._verNo()获取此函数的返回值。

c++中调用js函数:emscripten提供了多个类似于EM_ASM_的函数,可直接调用js对象中的函数。例如:js中有对象:var TestEvent={
testEvt:function(){console.log('test'); }
};,Qt中使用EM_ASM_({ TestEvent. testEvt ();});即可调用此对象的方法。具体的调用方式参见:            https://emscripten.org/docs/api_reference/emscripten.h.html#calling-javascript-from-c-c   


开发过程遇到的那些坑

目前webassembly开发还有一定限制,如不能访问本地文件、不能实现多线程、不能使用本地剪贴板、不能进行网络编程等。在具体开发过程中webassemblyjs必须相互辅助,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技术的应用实例。