New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue3-print-nb

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-print-nb

This is a directive wrapper for printed, Simple, fast, convenient, light. <!-- TOC -->

  • 0.1.4
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue3-print-nb

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

Install

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 () {
                console.log('正在加载预览窗口')
              },
              previewOpenCallback () {
                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 () {
                console.log('正在加载预览窗口')
              },
              previewOpenCallback () {
                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 () {
                console.log('正在加载预览窗口')
              },
              previewOpenCallback () {
                console.log('已经加载完预览窗口')
              },
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

Finally, use reslove() to return your URL

v-print API

ParameExplainTypeOptionalValueDefaultValue
idRange print ID, required valueString
standardDocument type (Print local range only)Stringhtml5/loose/stricthtml5
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-
openCallbackCall the successful callback function of the printing toolFunctionReturns the instance of Vue called at that time-
closeCallbackClose the callback function of printing tool successFunctionReturns the instance of Vue called at that time-
beforeOpenCallbackCallback function before calling printing toolFunctionReturns the instance of Vue called at that time-
urlPrint the specified URL. (It is not allowed to set the ID at the same time)string--
asyncUrlReturn URL through 'resolve()'Function--
previewPreview toolBoolean-false
previewTitlePreview tool TitleString-'打印预览'
previewPrintBtnLabelThe name of the preview tool buttonString-'打印'
zIndexCSS of preview tool: z-indexString,Number-20002
previewBeforeOpenCallbackCallback function before starting preview toolFunctionReturns the instance of Vue-
previewOpenCallbackCallback function after fully opening preview toolFunctionReturns the instance of Vue-

License:

MIT

FAQs

Package last updated on 20 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc