在Qt5.12上使用webassembly构建web报表工具(efreport.com)

websssembly介绍

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

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

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

 

Qt的webassembly技术支持

Qt在5.11和5.12都是以技术预览版进行支持，在即将发布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 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开发还有一定限制，如不能访问本地文件、不能实现多线程、不能使用本地剪贴板、不能进行网络编程等。在具体开发过程中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技术的应用实例。