电子签章处理文件和打印基于ABP框架的前端项目Vue&Element( 二 ) _ABP框架

<vue-drag-resize :x="0">定义组件的初始Y位置。
<vue-drag-resize :y="0">例如我们定义了一个报价单，并通过设置，把图片放置在页面中，让使用者可以通过拖动印章的方式，放到合适的位置上去，然后进行打印报价单即可带有印章的报价单出来了。

文章插图

这样就可以实现电子印章的拖动和放置处理了，记住其位置和状态，下次就可以直接定位到指定的位置上了。
另外，一般文档都需要打印，关于打印的处理，有很多方式，可以使用print.js(
https://github.com/crabbly/Print.js),也可以使用 vue-print-nb (https://github.com/Power-kxLee/vue-print-nb)，甚至复杂的定义可以考虑使用CLODOP组件来处理，不过我们这里可以简单的内置windows 对象的打印操作方式来处理普通的页面打印即可。

文章插图

print () {const print = this.$refs.print.innerHTMLconst printPart = print + csstyle;const newTab = window.open('_blank');newTab.document.body.innerHTML = printPart;newTab.print();newTab.close();},

文章插图
【电子签章处理文件和打印基于ABP框架的前端项目Vue&Element】
打印效果如下所示，采用了对应的CSS样式处理后，和实际的页面效果相当。

文章插图

在项目中，涉及到了html内容打印的需求，调用了浏览器的window.print用于打印显示不全问题由于window.print是1:1打印，打印内容过宽时，浏览器会自动从左截取掉超宽部分，因此在打印前需将页面进行调整
打印页边距设定为 0mm 时，网页内最大元素的分辨率：794×1123
因此可以将内容div设置为700px，剩余空间设置为页边距
去除浏览器默认页眉页脚页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距
由于window.print打印自带页眉页脚，用于存放打印url，日期时间，页面名称等内容，为屏蔽这些内容可使用css进行屏蔽
@media print {@page {margin: 0;}body {margin: 1cm;}}只屏蔽页脚
@page { margin-bottom: 0; }事件监听有两个事件可以监听到到打印事件，一个是beforeprint,一个是afterprint，分别表示打印事件触发前后。
这个事件在 IE6 就已经支持了，兼容大概是 Firefox、IE全支持, Chrome63+支持, Safari暂不支持
我们可在处理事件onbeforeprint() 将一些不需要打印的元素隐藏，和打印后的处理事件 onafterprint()放开隐藏的元素

window.addEventListener('beforeprint', ()=> {document.body.innerHTML = '打印前触发';});window.addEventListener('afterprint', ()=> {document.body.innerHTML = '打印后触发';});

设置打印布局（横向、纵向、边距） @media print {@page {// 纵向size: portrait;// 横向size: landscape;// 边距margin: 0cm 0cm 0cm 0cm;}}
文章转自
https://www.cnblogs.com/wuhuacong/p/16033604.html