vue项目打印网页功能-vue-print-nb

无知的小白丶

已于 2023-12-20 16:42:45 修改

阅读量1.4k

点赞数 6

文章标签： vue.js 前端 javascript

于 2023-12-20 16:26:40 首次发布

本文链接：https://blog.csdn.net/m0_61367745/article/details/135110554

版权

<button v-print>Print the entire page</button>

描述:

支持两种打印方式，直接打印页面 HTML、打印 URL

简单易用，支持兼容 Vue 的浏览器版本

在线Demo:

测试DEMO地址

安装:

Vue2 版本

npm install vue-print-nb --save

Vue3 版本

npm install vue3-print-nb --save

v-print API

使用方法

打印整个页面：

<button v-print>Print the entire page</button>

打印指定范围：

<button v-print="printObj">Print local range</button>

export default {
    data() {
        return {
            printObj: {
              url: 'http://localhost:8080/'
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

打印网址:

<button v-print="printObj">Print local range</button>

export default {
    data() {
        return {
            printObj: {
              url: 'http://localhost:8080/'
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

打印预览

支持打印预览、传入、支持所有打印方式preview:true

打印网址预览：

<button v-print="printObj">Print local range</button>

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('关闭了打印工具')
              }
            }
        };
    }
}

v-print API

Parame	Explain	Type	OptionalValue	DefaultValue
id	范围打印 ID，所需值	String	—	—
standard	文档类型（仅限打印本地范围）	String	html5/loose/strict	html5
extraHead	`<head></head>`在节点中添加 DOM 节点，并用（仅打印本地范围）分隔多个节点`,`	String	—	—
extraCss	`<link>`新的CSS样式表，并用（仅打印本地范围）分隔多个节点`,`	String	—	-
popTitle	`<title></title>`标签内容（仅打印本地范围）	String	—	-
openCallback	调用打印工具的成功回调函数	Function	Returns the instance of called at that time`Vue`	-
closeCallback	关闭打印工具成功的回调函数	Function	Returns the instance of called at that time`Vue`	-
beforeOpenCallback	调用打印工具前的回调函数	Function	Returns the instance of called at that time`Vue`	-
url	打印指定的 URL。（不允许同时设置ID）	string	-	-
asyncUrl	通过 'resolve（）' 和 Vue 返回 URL	Function	-	-
preview	预览工具	Boolean	-	false
previewTitle	预览工具标题	String	-	'打印预览'
previewPrintBtnLabel	预览工具按钮的名称	String	-	'打印'
zIndex	预览工具CSS：z-index	String,Number	-	20002
previewBeforeOpenCallback	启动预览工具前的回调函数	Function	Returns the instance of `Vue`	-
previewOpenCallback	完全打开预览工具后的回调函数	Function	Returns the instance of `Vue`	-
clickMounted	点击打印按钮的回调功能	Function	Returns the instance of `Vue`	-