# vue-print-nb
This is a directive wrapper for printed, Simple, fast, convenient, light.
<!-- TOC -->
- [vue-print-nb](#vue-print-nb)
- [Install](#install)
- [Vue2 Version:](#vue2-version)
- [Vue3 Version:](#vue3-version)
- [Description](#description)
- [Usage Method:](#usage-method)
- [Print the entire page:](#print-the-entire-page)
- [Print local range:](#print-local-range)
- [Print local range More:](#print-local-range-more)
- [Print URL:](#print-url)
- [Print Preview](#print-preview)
- [Print Url Preview:](#print-url-preview)
- [Print local range Preview](#print-local-range-preview)
- [Print Async Url](#print-async-url)
- [v-print API](#v-print-api)
<!-- /TOC -->
## Install
[鍦ㄧ嚎DEMO](https://power-kxlee.github.io/vue-print-nb/dist/index.html)
[ONLINE DEMO](https://power-kxlee.github.io/vue-print-nb/dist/index.html)
### Vue2 Version:
```bash
npm install vue-print-nb --save
```
```javascript
import Print from 'vue-print-nb'
// Global instruction
Vue.use(Print);
//or
// Local instruction
import print from 'vue-print-nb'
directives: {
print
}
```
### Vue3 Version:
```bash
npm install vue3-print-nb --save
```
```javascript
// 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
}
```
## 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:
```
<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
### Print local range More:
HTML:
```
<button v-print="printObj">Print local range</button><div id="loading" v-show="printLoading"></div>
<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 {
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: '<meta http-equiv="Content-Language"content="zh-cn"/>',
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 type `Objcet`
### 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 in` preview: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('鍏抽棴浜嗘墦鍗板伐鍏�')
}
}
};
}
}
```
#### Print local range Preview
HTML:
```
<button v-print="printObj">Print local range</button><div id="loading" v-show="printLoading"></div>
<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 {
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: '<meta http-equiv="Content-Language"content="zh-cn"/>',
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('鍏抽棴浜嗘墦鍗板伐鍏�')
}
}
};
}
}
```
### 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 | 鈥� | 鈥� |
| extraCss | `<link>` New CSS style sheet , and separate multiple nodes with `,`(Print local range only) | String | 鈥� | - |
| popTitle | `<title></title>` Content of label (Print local range only) | String | 鈥� | - |
| openCallback | Call the successful callback function of the printing tool | Function | Returns the instance of `Vue` called at that time | - |
| closeCallback | Close the callback function of printing tool success | Function | Returns the instance of `Vue` called at that time | - |
| beforeOpenCallback | Callback function before calling printing tool | Function | Returns the instance of `Vue` called at that time | - |
| url | Print the specified URL. (It is not allowed to set the ID at the same time) | string | - | - |
| asyncUrl | Return URL through 'resolve()' and Vue | Function | - | - |
| preview | Preview tool | Boolean | - | false |
| previewTitle | Preview tool Title | String | - | '鎵撳嵃棰勮' |
| previewPrintBtnLabel | The name of the preview tool button | String | - | '鎵撳嵃' |
| zIndex | CSS of preview tool: z-index | String,Number | - | 20002 |
| previewBeforeOpenCallback | Callback function before starting preview tool | Function | Returns the instance of `Vue` | - |
| previewOpenCallback | Callback function after fully opening preview tool | Function | Returns the instance of `Vue` | - |
| clickMounted | Click the callback function of the print button | Function | Returns the instance of `Vue` | - |
License锛�
[MIT](http://opensource.org/licenses/MIT)