天來給大家推薦一款非常不錯的 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({});

參與開發(fā)

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中發(fā)起打印。關鍵技術點是要把樣式完整復制過去；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