Nominal Pizza Masticator

    vue-print-nb

    1.7.5 • Public • Published

    vue-print-nb

    This is a directive wrapper for printed, Simple, fast, convenient, light.

    Install

    在线DEMO

    ONLINE DEMO

    Vue2 Version:

    npm install vue-print-nb --save
    import Print from 'vue-print-nb'
    // Global instruction 
    Vue.use(Print);
    
    //or
    
    // Local instruction
    import print from 'vue-print-nb'
    
    directives: {
        print   
    }

    Vue3 Version:

    npm install vue3-print-nb --save
    // 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 inpreview: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

    Keywords

    none

    Install

    npm i vue-print-nb

    DownloadsWeekly Downloads

    5,642

    Version

    1.7.5

    License

    MIT

    Unpacked Size

    2.8 MB

    Total Files

    24

    Last publish

    Collaborators

    • leechiji