打印与内容转换

[xinglie]

浏览器并不能准确的把设计器设计出来的内容打印出来，即使使用chrome，在对内容溢出隐藏的情况下打印，效果并不像网页中见到的那样。 要想获得更精确的打印，需要先对内容做转换，转换成图片或pdf。其实有了图片，转pdf是非常容易的，所以要优先生成图片。 目前在打印页面的内容转换存在诸多问题，后续提升可考虑以下3种方案。

方案1

最终渲染时，抛弃传统的dom方式，把所有可设计元素画在canvas上。这样后续在转换图片或pdf时，均不会产生错位、边线粗细不一等问题。

因目前所有数据均为json描述，因此通过该方式仅仅是开发工作量的问题，技术上并没有难度，只是工作量较大且周期长，需要有人协助。

方案2

服务端渲染转成图片。全在网页客户端里处理，开发工作量大，那就通过接口借助服务端的能力。

可向服务端提交json数据或完整的html，由服务端生成相应的图片，具体生成方案服务端决定。

这样的工作量全在服务端，需要综合评估客户端与服务端的工作量，看采用哪种方式更省时间。

方案3

通过开发客户端或命令行的形式，如使用nodejs，一方面提供http或websocket用于与设计器通讯，一方面使用如puppeteer的插件，在收到任务后，把网页内容转换成图片并回传给设计器。

目前感觉可使用方案3，在nodejs下快速开发测试一下。

[xinglie]

3已实现

[xinglie]

无对话框打印

针对不同的打印机，各种使用场景等，该项将会是一个长期的迭代和改进过程。

目前RDS提供的服务里，已完成生成图片、pdf等。同时类似lodop一样，由设计器打印页面发出打印指令，RDS接收到后直接把内容发送给打印机，实现无对话框打印。

因github仅支持静态内容，所以如果要尝试RDS则在拿到代码后，自己部署一下相应的服务器。

因打印机相关的设置项也较多，这将是一个持久战

[xinglie]

设置纸张

如果需要打印设计，需要把打印设计器的尺寸从默认的px(像素)单位转换成mm(毫米)单位，这是因为不同系统单位尺寸内所容纳的像素数是不一样的，如果使用px有可能造成打印尺寸不正确的问题

打印设置

在设计器中设计好的元素，在打印时会自动计算出每一页的位置和数据，所以务必把打印机默认的页边距等之类的设置为0

分页打印

打印时，会自动把设计器中的元素按设置好的页面大小进行分页，因此您应该直接把页面尺寸设置为目标纸张的尺寸，如A4或A3，这样在打印分页时就不会被浏览器自动把元素放到错误的分页上

分页打印时，请使用chrome浏览器，其它浏览器可能会有问题