@hvuejs/vue-print-js v0.0.1

vue-print-js

vue print plugin, vue2 or vue3; 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