vue-print-js
vue print plugin,
vue2orvue3; IE = 11.
NPM
npm install vue-print-js --save
or
yarn add vue-print-js
USE
vue2
// vue2
import Vue from "vue"
import { Vue2Printjs } from 'vue-print-js'
// Global instruction
Vue.use(Vue2Printjs)
// or
// Local instruction
import { Vue2Printjs } from 'vue-print-js'
directives: {
Vue2Printjs
}vue3
// vue3
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
// Global instruction
import { Vue3Printjs } from 'vue-print-js'
app.use(Vue3Printjs);
app.mount("#app");
// or
// Local instruction
import { Vue3Printjs } from 'vue-print-js'
directives: {
Vue3Printjs
}Component
// App.vue
<template>
<div id="printMe">
<main>Content</main>
<button class="no-print" v-print="printConfig">button print</button>
</div>
</template>
<script>
export default {
data () {
return {
printConfig: {
id: "#printMe",
beforeOpenCallback(vm) {
console.log("before open", vm);
},
openCallback(vm) {
console.log("open", vm);
},
closeCallback(vm) {
console.log("close", vm);
},
clickMounted(vm) {
console.log("click", vm);
},
}
}
}
}
</script>or
<template>
<div id="printMe">
<main>Content</main>
<!-- 'no-print' not print button -->
<button class="no-print" @click="handlePrint">button print</button>
</div>
</template>
<script>
import { print } from 'vue-print-js'
export default {
data () {
return {
loading: false
}
},
methods: {
// 直接事件调用
handlePrint () {
// print("#printMe")
print({
id: "#printMe",
beforeOpenCallback: () => {
console.log('before open')
},
openCallback: () => {
console.log('open')
},
closeCallback: () => {
console.log('close')
}
})
}
}
}
</script>
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 | — | - |
| mediaCss |
media='print' Load the print CSS style sheet |
Boolean | true/false | false |
| 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 | - | - |
| clickMounted | Click the callback function of the print button | Function | Returns the instance of Vue
|
- |