npm package: @hvuejs/vue-print-js
Description: Vue print plugin
Author: hao
Latest version: 0.0.1

# vue-print-js

> vue print plugin, `vue2` or `vue3`; IE = 11.

## NPM

```base
npm install vue-print-js --save

or

yarn add vue-print-js
```

## USE

vue2

```js

// 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

```js

// 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

```vue
// 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

```vue

<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`                     | -            |