使用QT+webassembly构建在线报表设计器
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://webassembly.org/getting-started/developers-guide/
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下,在浏览器运行方式下,真正实现跨平台操作。
使用QT+webassembly构建在线报表设计器相关推荐
- 基于webassembly的web报表设计器
WebAssembly介绍 Webassembly(简称Wasm)是一种基于堆栈虚拟机的二进制指令格式.Webassembly用于编译C/C++/Rust等高级语言,生成一个可移植的目标,使客户端与服 ...
- .net mvc 报表_Web在线报表设计器使用指南
市面上的报表工具有很多,虽说功能大同小异,但每一个报表工具都有各自明确的定位,选择最合适的工具,才能达到事半功倍的效果. 本文将要介绍的ActiveReports报表工具,可全面满足 .NET 报表开 ...
- 创建您的ActiveReports Web端在线报表设计器
下载ActiveReport最新试用版 概述 ActiveReports Web端在线报表设计器已经正式上线!看到它这么帅气.实用,你是不是也想自己动手创建一个? 现在我们就来教您,如何创建一个简单的 ...
- 在线报表设计器如何制作多表单填报(报表工具efreport.com)
说明:多表单如何填报,本课程选择有关联的学生基本信息.家庭成员.期中成绩与期末成绩表进行多表单填报的详细说明. 第一步:添加数据源 数据源区点击,在数据集编辑框中输入:"select * f ...
- dev 报表设计器 怎么设置每页10行_可嵌入您系统的.NET 报表控件ActiveReports:带状列表组件...
葡萄城报表控件ActiveReports V14.0 全面支持 .NET Core平台.同时 ActiveReports的桌面报表设计器UI也全面增强,报表预览方式得以全面优化,报表设计能力得以大幅提 ...
- 水晶报表 jar包版本过低_工具类学习-UReport报表设计器整合
dada-report报表整合UReport报表设计器工具 结合日常工作和学习实践,针对传统报表子站面临的问题,尝试借助UReport报表设计器解决 1.可在现有工程基础上引入Ureport2报表设计 ...
- 可视化Web报表设计器-FastReport Online Designer简介
FastReport Online Designer是FastReport.Net的网页版. >>FastREport Online Designer在线体验 >>FastRE ...
- bootstrap3 表单构建器_FastReport.NET报表设计器连接到OracleDB关系数据库
首先,您可以使用ODBC连接器.但是它充满了很多设置. FastReport.NET报表设计器连接到OracleDB关系数据库 如您所见,您需要创建数据源及其连接字符串.动作比较多. 此方法的替代方法 ...
- UReport2 报表设计器 在线表格
UReport2官网 一.UReport2报表设计器 UReport2是一个开源的可视化报表设计器,功能强大,操作简单,可以实现复杂的报表统计,有各种各样的导出和打印功能,支持导入Ex ...
- FastReport.Net教程:基本原理之报表、报表设计器和报表选项
下载FastReport.Net最新版本 FastReport.Net在线订购火热进行中,立可享受特别优惠!点此链接,速来抢购!!! 基本原理 在本章中,我们将学习在FastReport中使用报表的原 ...
最新文章
- php 下载exe 打不开,EXE文件打不开的解决方法
- Android之圆角矩形
- git切换用户密码_Git 最基本的命令
- 1036 和奥巴马一起学编程
- web之XmlHttpRequest
- 一些个开源网站的搜集和整理——待续
- HTML5CSS3网页设计仿微信通讯录页
- 关于ARPG发展之操作和技能之泛泛而谈(转)
- 高德地图做汽车路线规划的时候清除之前的路线
- 软件项目管理复习(一-七章)
- 搜狗Sogou拼音输入法,搜狗高速浏览器(IE浏览器内核)
- (一)libvirt库简介
- java游戏演示ppt_java项目开发实战──五子棋游戏.ppt
- VsCode使用Git连接Gitee和GitHub
- arduino智能风扇
- ISCSI HBA卡和普通网卡的区别
- android 华为手机 log,华为手机打开log日志的方法的方法
- ES和Kibana设置账号密码
- c语言51单片机延时程序,51单片机c语言延时.doc
- esp8266 + 温湿度的vfd 时钟
热门文章
- tibco linux安装手册,TIBCO Admin 5.11.1 安装及Domain建立 (Linux)
- 计算机使用函数计算不及格门次,EXCEL计算不及格门数用什么函数
- C++ 类(继承中的构造和析构)
- 电子工程师英年早秃?离高阶茂密工程师你只差这套工具!
- 云计算与虚拟化技术发展编年史
- Opencv打开basler相机——实现显示视频、保存图片、记录视频(Windows下)
- 无需U盘,30秒找回win10/win7用户密码
- 国家级赛事正式开赛 | 2019数字中国创新大赛上线
- 无人机DLG生产作业流程
- 遥感图像超分辨重建综述