天來給大家推薦一款非常不錯的 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端打印是比較常見的需求,實際工作中也接觸了不少,在這里對工作中用到的做一下總結
通過style標簽內聯引入,或者使用媒體查詢media="print"外鏈樣式表。然后將無關元素隱藏,只將需要打印的內容展示出來;這時候需要專門寫一套打印樣式,頁面修改,打印樣式可能也需要修改,維護成本較高;
<style>
@media print{}
</style>
// 或者
<link rel="stylesheet" media="print" href="print.css”>
需要遍歷元素和所有子元素,克隆dom到新的iframe,然后在ifram中發(fā)起打印。關鍵技術點是要把樣式完整復制過去;jquery.print.js; react-to-print就是這樣實現;
例子
這種方案的好處是適用性強,缺點就是實現難度大;
支持@page 來設置,同時支持 偽類 :left 、:right、:first
打印常用的是A4紙,A4紙尺寸是21cm×29.7cm,在css中可以使用size屬性設置
size屬性設置頁面大小和方向:
例子
@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;
不過可能會留下空白。
window.print() 、document.execCommand('print’) 、頁面右鍵菜單打印、command+p
*請認真填寫需求信息,我們會在24小時內與您取得聯系。