修改ureport2源码(2)新增字体库

ureport2原有的字体库

修改ureport2源码(2)新增字体库_第1张图片

 修改后的效果如下

修改ureport2源码(2)新增字体库_第2张图片

使用效果图

修改ureport2源码(2)新增字体库_第3张图片

 修改ureport2源码(2)新增字体库_第4张图片

字体库的版权不便宜,尤其是被某某盯上之后,不是成被告,还得掏money。

下面我们开工, 切入今天的正题。

1.修改ureport2-font项目

1.1添加新增字体库

首先找到ureport2-font,项目增加阿里普惠体。(模仿已有的字体库功能即可)

修改ureport2源码(2)新增字体库_第5张图片

目前只做了ttf格式的字体库文件,其他的还未研究。

1.2注册字体库

找到ureport-font-context.xml文件,注册新增的字体。

修改ureport2源码(2)新增字体库_第6张图片

 2.修改ureport2-js项目

2.1修改package.json文件

文件相对路径为:ureport2-js\package.json

修改ureport2源码(2)新增字体库_第7张图片

增加一下内容:

    "build": "webpack",
    "start": "webpack-dev-server --open"

2.2修改FontSettingDialog.js 

文件相对路径为:ureport2-js\src\dialog\FontSettingDialog.js

修改ureport2源码(2)新增字体库_第8张图片

 

 2.3修改FontFamilyTool.js

文件相对路径为:ureport2-js\src\tools\FontFamilyTool.js

修改ureport2源码(2)新增字体库_第9张图片

 

具体内容:

fonts.push("阿里普惠");

至此,源码部分已经修改完成。

接下来,如何编译、使用修改后的项目产品呢?至关重要,别眨眼,这可是千锤百炼出来的,流过不少汗水的。

3.编译项目

此处需要强调的是编译的顺序,呵呵,别人不告诉他,偷着乐吧。

3.1编译ureport2-js项目

回到vscode,打开终端,我们输入以下命令:npm run build

修改ureport2源码(2)新增字体库_第10张图片

 看到它,恭喜你了,离成功近了一步。

那么,编译成功的文件到哪去了呢?

找到webpack.config.min.js,在ureport2-js项目下,里面有编译成功后,输出的路径地址

修改ureport2源码(2)新增字体库_第11张图片

 这也是它的编译顺序排在第一位的原因,ok,前端编译成功了。

到ureport2-console\src\main\resources\ureport-asserts\js目录下,看一眼,新出生的baby。

修改ureport2源码(2)新增字体库_第12张图片

3.2编译ureport2-console项目

这个是最终出产品的地方,它是ureport2-parent的子模块。

仔细查看每个模块的POM文件,会发现ureport2-console依赖了

修改ureport2源码(2)新增字体库_第13张图片

 其他的就不一一截图了,自行研究。

好吧,开始编译,一定要加“-Dgpg.skip”,不然郁闷死你。

mvn clean install -Dgpg.skip

 这里简单解释一下,用“install”,而不用“package”,是本地观察效果的一个好方法。这样,编译成功后的jar包,会自动安装到本机,编译后的jar包AGV信息如下:

com.bstek.ureport
ureport2-console
2.3.0-SNAPSHOT

 查看一下文件目录, 已经存在了。

修改ureport2源码(2)新增字体库_第14张图片

 3.3使用新编译版本

自行搭建环境中,替换原有的依赖

修改ureport2源码(2)新增字体库_第15张图片

        	
        
		
			
 		
			com.bstek.ureport
			ureport2-console
			2.3.0-SNAPSHOT
		

至此,整个过程已经完成,运行起来,看一下修改后的效果吧。

4.验证效果

 修改ureport2源码(2)新增字体库_第16张图片

 这里是一个开始,本人对前端不是很熟悉,希望大家能贡献自己的优秀作品。

 

 

 

 

 

 

 

 

你可能感兴趣的:(数据报表)