天来给大家推荐一款非常不错的 Vue 可拖拽打印设计器Hiprint。

引入使用

// main.js中 引入安装

import {hiPrintPlugin} from 'vue-plugin-hiprint'

Vue.use(hiPrintPlugin, '$pluginName')

hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端

// 引入后使用示例

this.$pluginName.init();

var hiprintTemplate = new this.$pluginName.PrintTemplate();

var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });

//文本

panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });

//条形码

panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });

//二维码

panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });

//长文本

panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });

//表格

panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });

//Html

panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });

//竖线//不设置宽度

panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });

//横线 //不设置高度

panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });

//矩形

panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });

//打印

hiprintTemplate.print({});

//直接打印，需要安装客户端

hiprintTemplate.print2({});

参与开发

git clone https://gitee.com/CcSimple/vue-plugin-hiprint.git

// init

cd vue-plugin-hiprint

npm i

// 调试预览

npm run serve

// 打包

npm run build

非常不错的一款集成 vue 可视化打印项目，感兴趣的可以去了解一下。

预览地址

https://ccsimple.gitee.io/vue-plugin-hiprint/

仓库地址

https://github.com/CcSimple/vue-plugin-hiprint

好了，今天的分享就到这里吧。

言

在web端打印是比较常见的需求，实际工作中也接触了不少，在这里对工作中用到的做一下总结

1.通过媒体查询隐藏元素

通过style标签内联引入，或者使用媒体查询media="print"外链样式表。然后将无关元素隐藏，只将需要打印的内容展示出来；这时候需要专门写一套打印样式，页面修改，打印样式可能也需要修改，维护成本较高；

<style>
  @media print{}
</style>
// 或者
<link rel="stylesheet" media="print" href="print.css”>

2.将需要打印的元素复制到一个iframe中

需要遍历元素和所有子元素，克隆dom到新的iframe，然后在ifram中发起打印。关键技术点是要把样式完整复制过去；jquery.print.js; react-to-print就是这样实现；
例子

这种方案的好处是适用性强，缺点就是实现难度大；

3.打印页面设置

支持@page 来设置，同时支持 伪类 :left 、:right、:first

1. :left设置多页打印的时候偶数页的配置；
2. :right设置多页打印的时候奇数页的配置;
3. :first 设置第一页的配置

页面宽度

打印常用的是A4纸，A4纸尺寸是21cm×29.7cm,在css中可以使用size属性设置

size属性设置页面大小和方向：

1. 支持单独设置 A4、A3等 , 默认是纵向
2. 支持单独portrait、landscape；纸张大小默认是关键词letter;
3. 也支持 A4、A3 和 portrait、landscape关键词组合： A4 landscape；
4. 也支持直接设置页面尺寸，比如：21cm 29.7cm，代表页面宽高分别为21cm和29.7cm
5. 未设置size属性，可以在打印预览选择纸张大小和方向；设置之后就不能再选择了。

例子

页面的边距

1. margin属性设置页面的边距 : 不支持 em 和 ex;
2. 默认的打印会带有页眉页脚。页眉包括日期、title，页脚包括链接和分页等信息。 可以通过 margin 设置边距达到隐藏页眉页脚的目的

@page {
    margin: 3.7cm 2.6cm 3.5cm;  /* 上下左右边距 */
}
@page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
}
@page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
}
@page :first {
    size: A4 portrait;
    margin-left: 4cm;
    margin-right: 4cm;
}

/* 隐藏页眉 */
@page { margin-top: 0; }

/* 隐藏页脚 */
@page { margin-bottom: 0; }

使用绝对物理单位

使用pt、mm、cm等绝对单位

分页

打印的时候如果页面很长就会自动分页，如果我们希望分页不要把一些元素分开，可以给元素设置break-inside: avoid;
不过可能会留下空白。

浏览器兼容性

1. firefox不支持size属性可以在打印预览设置纸张和打印方向
2. safari不支持@page可以在打印预览设置纸张和打印方向

调启打印预览

window.print() 、document.execCommand('print’) 、页面右键菜单打印、command+p