vue-print-nb-z
v2.0.0
Published
修改了vue-print-nb,增加了callback和endcallback,window.print增加回调功能
Downloads
16
Readme
FAQ
插件提供了打印结束回调,结果没用!!!
fork了一份自己改了下;
增加打印之前的回调和打印之后的回调
callback(): 打印之前的回调
endCallback(): 打印之后的回调
mode: 打印方向,默认竖向,1为横向,0横向
源码
vue-print-nb
This is a directive wrapper for printed, Simple, fast, convenient, light.
Install
NPM
npm install vue-print-nb-z --save
import Print from 'vue-print-nb'
// Global instruction
Vue.use(Print);
//or
// Local instruction
import print from 'vue-print-nb'
directives: {
print
}
Run demo
Download the project, install dependencies, run demo
npm run serve
-Local: http://localhost:8080/
Description
Print the entire page:
<button v-print>Print the entire page</button>
Print local range:
HTML:
<div id="printMe" style="background:red;">
<p>葫芦娃,葫芦娃</p>
<p>一根藤上七朵花 </p>
<p>小小树藤是我家 啦啦啦啦 </p>
<p>叮当当咚咚当当 浇不大</p>
<p> 叮当当咚咚当当 是我家</p>
<p> 啦啦啦啦</p>
<p>...</p>
</div>
<button v-print="'#printMe'">Print local range</button>
Pass in a string type directly
id
: ID of local print range
More
HTML:
<button v-print="printObj">Print local range</button>
<div id="printMe" style="background:red;">
<p>葫芦娃,葫芦娃</p>
<p>一根藤上七朵花 </p>
<p>小小树藤是我家 啦啦啦啦 </p>
<p>叮当当咚咚当当 浇不大</p>
<p> 叮当当咚咚当当 是我家</p>
<p> 啦啦啦啦</p>
<p>...</p>
</div>
JavaScript:
export default {
data() {
return {
printObj: {
id: "printMe",
popTitle: 'good print',
extraCss: 'https://www.google.com,https://www.google.com',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
};
}
}
You can also pass in an object type Objcet
API
id
: *requisite Partial printing of the incoming IDstandard
: Document type, default is html5, optionalhtml5
,loose
,strict
extraHead
: Additional tags attached to the head tag, separated by commasextraCss
: Additional link connections, separated by commaspopTitle
: Title shows the titlecallback()
: 打印之前的回调endCallback()
: 打印之后的回调mode
: 打印方向,默认竖向,1为横向,0横向