行列 comments

Results 95 comments of


                                            行列

#### 无对话框打印 > 针对不同的打印机，各种使用场景等，该项将会是一个长期的迭代和改进过程。目前`RDS`提供的服务里，已完成生成图片、pdf等。同时类似`lodop`一样，由设计器打印页面发出打印指令，`RDS`接收到后直接把内容发送给打印机，实现无对话框打印。因`github`仅支持静态内容，所以如果要尝试`RDS`则在拿到代码后，自己部署一下相应的服务器。因打印机相关的设置项也较多，这将是一个持久战

打印与内容转换

### 设置纸张如果需要打印设计，需要把打印设计器的尺寸从默认的`px`(像素)单位转换成`mm`(毫米)单位，这是因为不同系统单位尺寸内所容纳的像素数是不一样的，如果使用`px`有可能造成打印尺寸不正确的问题 ### 打印设置在设计器中设计好的元素，在打印时会自动计算出每一页的位置和数据，所以务必把打印机默认的页边距等之类的设置为0 ### 分页打印打印时，会自动把设计器中的元素按设置好的页面大小进行分页，因此您应该直接把页面尺寸设置为目标纸张的尺寸，如`A4`或`A3`，这样在打印分页时就不会被浏览器自动把元素放到错误的分页上 **分页打印时，请使用chrome浏览器，其它浏览器可能会有问题**

迷你模式、自定义排版及设计器插件

> 大佬，数据源可以绑定 input 吗可以，配置一下就好了

数据-单元格

自动撑高功能因不好控制最终的打印界面，所以暂时被隐藏起来了，等寻到合适方案后再放开。

浏览器兼容及相关问题

### 字体 safari下不显示微软雅黑，所以文字并不像chrome或firefox中的那样，系统问题，无法解决。 ### 拖动绑定数据 safari下，dragenter dragleave事件中无relatedTarget对象，会导致safari某些数据绑定情况下操作并不如chrome或firefox。等浏览器升级，report-designer不修复该问题 ### 客户端转换图片、pdf转换依赖于html2canvas，表格边框bug https://github.com/niklasvh/html2canvas/issues/1777 依赖于html2canvas，不是所有都能转图片和pdf https://html2canvas.hertzen.com/features 如果需要高保真还原，则需要report-designer-server模块在服务器端提供接口让前端使用，进行高保真转图片或pdf **设计器自己的图片库需要允许跨域，否则在内容转图片及pdf时将无法展示** ### css中的zoom `列表格`元素中快捷皮肤使用了css的zoom进行了缩放，firefox并不支持且无相应的便捷解决方式，故此bug不再修复处理 ### 字号部分浏览器如`chrome`在设置里会限制最小字号的大小，比如最小`12px`，会导致页面中无法显示小于`12px`的字号 ### relatedTarget 规范中指明当部分事件有关联`dom`节点时(relatedTarget)，在`shadow root`外部时，应指向该`shadow root`所在的节点：https://www.w3.org/TR/2016/WD-shadow-dom-20160610/#event-relatedtarget-retargeting 目前`chrome`版本89似乎并没有遵循规范，`relatedTarget`指向了`shadow root`内部节点，导致在某些情况下，拖动绑定数据并不是预期效果 ###...

浏览器兼容及相关问题

### jsPDF > 客户端生成pdf使用：https://github.com/parallax/jsPDF `jsPDF`会根据`宽、高`尺寸进行对换处理，https://github.com/parallax/jsPDF/blob/master/src/jspdf.js#L2741 `report-designer`为了防止尺寸对调处理后缺失内容，会检测尺寸，生成`PDF`时，确保高永远比宽大`1`单位。该处逻辑可根据自己的需要自行调整

表单-数据采集

### 使用说明设计完成后的“数据采集”元素，可以拿出来在其它页面中单独使用。如何独立使用参考：[独立使用设计元素](https://github.com/xinglie/report-designer/issues/38) ### 事件派发 > 数据采集向外派发`elementinput`事件，在输入框有任何输入变化时，均会向外派发该事件。可以在该事件内获取用户所有的输入以及对内容做校验等派发的事件参数对象如下 ```js elementType: 'form-collect',//针对数据采集元素则是写死的form-collect elementProps: stringifyProps,//数据采集元素包含子元素序列化后的JSON字符串，包含用户输入，可供还原界面使用 elementValue: values,//针对所有输入框单独提取的一份独立的用户输入数据 elementInputs//所有可供用户输入的输入框DOM对象 ``` ### 监听、收集数据假设`html`结构如下 ```html designer.element('#form_collect',{...}); ``` 可以在`form_collect`自身或任意祖节点上监听，因为`elementinput`是一个冒泡事件。如在`document.body`上监听事件 ```html document.body.addEventListener('elementinput',console.log(e)); designer.element('#form_collect',{...}); ```...

表单-数据采集

### 动态添加行仅数据行支持在最终用户使用时，可动态添加和删除行。仅能删除动态添加的行，不能删除设计器中设置的原始行。动态添加的行添加在最后一行数据行那里，即合计行的前面。 ### 只读模式 ```html designer.element('#form_collect',{ id:"e_180", type:"form-collect", readonly:trueOrFalse,//如果readonly为true，则数据采集表格只读，无添加删除行的按钮，所有input框增加readonly属性 props:{ //... } }); ```