0.0.3 • Published 4 years ago
@theshy/vue-print v0.0.3
基于vue的一个打印任意dom区域的插件
在线预览(兼容IE9+)
Introduction
vue-print是一个能够打印任意dom区域的vue插件,秉承所见即所得的原则
How to do
采用iframe来将打印区域构建一个新的document,然后利用原生的window.print来实现
How to use
npm install @theshy/vue-print --save
//在main.js引入并注册
import vuePrint from '@theshy/vue-print'
Vue.use(vuePrint)
//在组件App.vue中
<template>
<button @click="prinfHandle">print</button>
<div ref="view">
<p>asdasd</p>
<p>asd</p>
<p>asdad</p>
</div>
</template>
<script>
export default {
name: "App",
methods: {
prinfHandle() {
this.$p({
el: 'this.$refs.view', //打印目标dom节点,eg: this.refs.view
debug: true, //打开调试模式,会显示iframe,
importCss: true, //引入head 中的link stylesheet
importStyle: true, //引入style标签中的样式
loadCss: [], //需要载入的第三方样式表
title: '', //打印标题
delay: 300, //延迟打印时间,确保iframe中的静态资源加载完成
beforePrinfHandle: null, //打开打印窗口前的钩子函数,可以针对打印文档进行自定义调整,接受一个document参数
afterPrintHandle: null, //打印完成的钩子函数,
});
}
},
};
</script>
License
This project is MIT licensed.