文字悬浮在公章上打印

在一些业务需求中，我们需要将公章贴在文本上，然后打印出来，让相关人员签字。但是也有需求是直接将相关人员也打印出来，然后人员的名字要在公章之上，模拟出现盖章后签字的效果。

此类大部分功能是通过悬浮图片进行实现的。如下：

设计器中右下角的图片是插入的悬浮元素，然后分页预览中点击FR自带的打印，可以得到如下效果：

但是仔细看就会发现，其实公章是在文字之上的，显然不符合我们的需求。

下面我提供一种思路来实现该功能。

主要步骤如下：

1、模板web属性->分页预览设置->加载结束事件中增加如下代码：

// 将表格整体移到最上层，达到文字在图片上的效果
$(".x-table").css("z-index","99");

// 因为背景图片在打印时会不显示，需要将原来的div替换为img标签
// 获取原始图片的div
var olddiv = $('div[name="YZ"] div div');
// 获取背景图片的URL地址
var imageurl = olddiv.css("backgroundImage").replace("url(\"","").replace("\")","");
// 创建IMG标签
var newimage = $("<img src='"+imageurl+"'/>");

// 将原来的div的样式转义到新的img标签上
newimage.attr("style",olddiv.attr("style"));

// 将原来的元素清空，并载入新的元素

$('div[name="YZ"] div div').remove();
newimage.prependTo('div[name="YZ"] div');
// 删除页脚页眉及滚动条
$('<style type="text/css" media="print">@page{size: auto;margin: 0mm;}#content-container::-webkit-scrollbar{display: none}</style>').prependTo('head')
// 引入PrintArea.js
$(' <script src="https://cdnjs.cloudflare.com/ajax/libs/PrintArea/2.4.1/jquery.PrintArea.min.js" integrity="sha512-mPA/BA22QPGx1iuaMpZdSsXVsHUTr9OisxHDtdsYj73eDGWG2bTSTLTUOb4TG40JvUyjoTcLF+2srfRchwbodg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>').prependTo('head')

其相应的功能在注释中已经写明

2、在分页预览的工具栏上增加自定义按钮，取名自定义打印，相应事件代码如下：

$(".page-block").printArea();

测试在前台打印效果如下，可以清楚看到文字是在公章之上的：

主要实现思路：

1. 将整个文字的表格移到最顶层，以实现文字悬浮于公章之上
2. 获取背景图片地址及样式
3. 创建img标签，并添加图片地址和样式
4. 将div元素用新创建的img替换
5. 点击打印按钮时只打印page-block

重点：

1. 悬浮图片在前端是以div的背景图片展示出来的，原生window.print()方法打印时会忽略掉背景图片，所以需要将div替换成img
2. PrintArea.js可以实现只打印指定元素块
3. FR原生的打印是服务端的打印，所以在前台加载结束后的样式调整影响不了原生打印

点击下载DEMO模板