vue-print-nb

This is a directive wrapper for printed, Simple, fast, convenient, light.

Install

Vue2 Version:

npm install vue-print-nb --save

import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);

//or

// Local instruction
import print from 'vue-print-nb'

directives: {
    print   
}

Vue3 Version:

npm install vue3-print-nb --save

// Global instruction 
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

//or

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

![](https://github.com/Power-kxLee/vue-print-nb/blob/master/src/img/Chrome.png)

Description

Support two printing methods, direct printing page HTML, and printing URL

It's easy to use, Support Vue compatible browser version

Usage Method:

Print the entire page:

<button v-print>Print the entire page</button>

Print local range:

HTML:
```

葫芦娃，葫芦娃

一根藤上七朵花

小小树藤是我家啦啦啦啦

叮当当咚咚当当　浇不大

叮当当咚咚当当是我家

啦啦啦啦

...

<button v-print="'#printMe'">Print local range</button>

Pass in a string type directly
* `id`: ID of local print range

### Print local range More:
HTML:

Print local range

葫芦娃，葫芦娃

一根藤上七朵花

小小树藤是我家啦啦啦啦

叮当当咚咚当当　浇不大

叮当当咚咚当当是我家

啦啦啦啦

...

JavaScript:
export default {
data() {
return {
printLoading: true,
printObj: {
id: "printMe",
popTitle: 'good print',
extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
extraHead: '',
beforeOpenCallback (vue) {
vue.printLoading = true
console.log('打开之前')
},
openCallback (vue) {
vue.printLoading = false
console.log('执行了打印')
},
closeCallback (vue) {
console.log('关闭了打印工具')
}
}
};
}
}
`` You can also pass in an object typeObjcet`

Print URL:

If you need to print the specified URL, you can use the following method:
(Ensure that your URL is the same source policy)

HTML:
<button v-print="printObj">Print local range</button>

JavaScript:
export default { data() { return { printObj: { url: 'http://localhost:8080/' beforeOpenCallback (vue) { console.log('打开之前') }, openCallback (vue) { console.log('执行了打印') }, closeCallback (vue) { console.log('关闭了打印工具') } } }; } }

Print Preview

Support print preview, pass inpreview:true, All printing methods are supported

Print Url Preview:

HTML:
<button v-print="printObj">Print local range</button>

JavaScript:
```
export default {
data() {
return {

        printObj: {
          url: 'http://localhost:8080/'
          preview: true,
          previewTitle: 'Test Title', // The title of the preview window. The default is 打印预览
          previewBeforeOpenCallback (vue) {
            console.log('正在加载预览窗口')
          },
          previewOpenCallback (vue) {
            console.log('已经加载完预览窗口')
          },
          beforeOpenCallback (vue) {
            console.log('打开之前')
          },
          openCallback (vue) {
            console.log('执行了打印')
          },
          closeCallback (vue) {
            console.log('关闭了打印工具')
          }
        }
    };
}

}
```
![](2021-05-12-18-28-08.png)

Print local range Preview

HTML:
```
Print local range

葫芦娃，葫芦娃

一根藤上七朵花

小小树藤是我家啦啦啦啦

叮当当咚咚当当　浇不大

叮当当咚咚当当是我家

啦啦啦啦

...

JavaScript:
export default {
data() {
return {
printLoading: true,
printObj: {
id: "printMe",
preview: true,
previewTitle: 'print Title', // The title of the preview window. The default is 打印预览
popTitle: 'good print',
extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
extraHead: '',
previewBeforeOpenCallback (vue) {
console.log('正在加载预览窗口')
},
previewOpenCallback (vue) {
console.log('已经加载完预览窗口')
},
beforeOpenCallback (vue) {
vue.printLoading = true
console.log('打开之前')
},
openCallback (vue) {
vue.printLoading = false
console.log('执行了打印')
},
closeCallback (vue) {
console.log('关闭了打印工具')
}
}
};
}
}
```

![](2021-05-12-18-28-56.png)

Print Async Url

Perhaps, your URL is obtained asynchronously. You can use the following method

HTML:
<button v-print="printObj">Print local range</button>

JavaScript:
export default { data() { return { printObj: { asyncUrl (reslove, vue) { setTimeout(() => { reslove('http://localhost:8080/') }, 2000) }, previewBeforeOpenCallback (vue) { console.log('正在加载预览窗口') }, previewOpenCallback (vue) { console.log('已经加载完预览窗口') }, beforeOpenCallback (vue) { console.log('打开之前') }, openCallback (vue) { console.log('执行了打印') }, closeCallback (vue) { console.log('关闭了打印工具') } } }; } }
Finally, use reslove() to return your URL

v-print API

Parame	Explain	Type	OptionalValue	DefaultValue
id	Range print ID, required value	String	—	—
standard	Document type (Print local range only)	String	html5/loose/strict	html5
extraHead	`<head></head>`Add DOM nodes in the node, and separate multiple nodes with `,` (Print local range only)	String	—	—

License：

MIT