354 lines
12 KiB
Markdown
354 lines
12 KiB
Markdown
|
# 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)
|