vue打印模版-自定义模版-局部打印/使用插件vue-print-nb打印，打印样式设置

原创已于 2023-10-09 10:52:49 修改

· 1.9w 阅读

76 ·

版权

文章标签：

#vue

于 2021-10-08 11:42:19 首次发布

vue 专栏收录该内容

19 篇文章

订阅专栏

一、自定义模版打印功能：

<template>
    <div v-if="printVisible">
      <div id="printBox">
        <slot></slot>
      </div>
    </div>
</template>

<script>
export default {
  props:{
    printVisible:{
        type:Boolean,
        default:false,
    }
  },
  watch:{
      printVisible(data){
          if(data==true){
            this.$nextTick(()=>{
               this.onprint('printBox')
            })
          }
      },
  },
  methods:{
    onprint:function (ids){
      var el = document.getElementById(ids);
      var iframe = document.createElement('IFRAME');
      var doc = null;
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:0;top:0;');
      document.getElementById(ids).appendChild(iframe);
      doc = iframe.contentWindow.document;
      doc.write('<div >' + el.innerHTML + '</div>');
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
    }
  }
}
</script>

注意：调用时需要手动销毁组件。

二、使用插件打印 vue-print-nb

参考地址：vue-print-nb - npmVue plug-in, print! Good!. Latest version: 1.7.5, last published: a year ago. Start using vue-print-nb in your project by running `npm i vue-print-nb`. There are 55 other projects in the npm registry using vue-print-nb.https://www.npmjs.com/package/vue-print-nb

安装插件

npm install vue-print-nb

使用：


<template>
 <div class="inventBox" id="print">
      我是打印内容
</div>
<el-button type="primary" v-print="'#printMe'">打印</el-button>
</template>

<script>
import print from 'vue-print-nb'
export default {
  directives: {
    print   
  },
  data() {
    return {}
  }
}
</script>

注：如果是全局注册Vue.use(print) ，则不需要在页面单独引用

参数说明：API

参数	作用	类型	可选项	默认值
id	局部打印有效，标识符	String	-	‘printId’
standard	局部打印有效，打印的文本类型	String	HTML5/loose/strict	HTML5
extraHead	局部打印有效，添加在打印区域的最顶端	String	-	-
extraCss	局部打印有效，为打印区域提供Stylesheet样式表	String	-	-
popTitle	局部打印有效，编辑页眉的标题	String	-	Document Title
clickMounted	全局有效，调用v-print绑定的按钮点击事件callback	Function	-	this.Object
openCallback	全局有效，调用打印时的callback	Function	-	this.Object
closeCallback	全局有效，调用关闭打印的callback(无法区分确认or取消)	Function	-	this.Object
beforeOpenCallback	全局有效，调用开始打印之前的callback	Function	-	this.Object
preview	全局有效，控制打印预览	Boolean	true/false	false
previewTitle	编辑预览页面的预览标题	String	-	‘打印预览’
previewPrintBtnLabel	编辑预览页面的打印按钮文本	String	-	‘打印’
previewBeforeOpenCallback	调用打开预览页面之前的callback	Function	-	this.Object
previewOpenCallback	调用打开预览页面之后的callback	Function	-	this.Object
url	非局部打印有效，打印指定的URL，确保同源策略相同	String	-	-
asyncUrl	非局部打印有效，异步加载打印指定的URL，确保同源策略相同	Function	-	-
zIndex	预览有效，预览窗口的z-index，默认是20002，最好比默认值更高	String，Number	-	20002

三、关于打印样式

1、单独新建一个print.css的样式文件，专门放打印样式。

2、在打印的当前页面引入这个文件，注意：需要在引入文件后标明print，如：

@import url('../../assets/css/print.css') print;

3、如果不想单独新建样式文件的话，可以直接在当前文件写样式，如：

<style>
@media print {
 .Title{ padding-left: 16px; position: relative;font-size: 20px;}
 .Title::before{content: ''; position: absolute; display: inline-block; width:6px; height: 20px;background: #0099FF;top: 3px; left: 0;border-radius: 5px;}

} 
</style>

效果：

小技巧：

需要分页的时候加上<div style="page-break-before:always;"><br /></div>这行代码就好了

page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。

page-break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。

page-break-before若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。

page-break-after属性会将分页符号加在指定组件后，而非之前。

值	描述
auto	默认值。如果必要则在元素前插入分页符
always	在元素前插入分页符
avoid	避免在元素前插入分页符
left	在元素之前足够的分页符，一直到一张空白的左页为止
right	在元素之前足够的分页符，一直到一张空白的右页为止
inherit	规定应该从父元素继承 page-break-before 属性的设置

在Dom对象中pageBreakBefore属性

语法:

Object.style.pageBreakBefore=auto|always|avoid|left|right

<html>
　　<head>
　　　　<script type="text/javascript">
　　　　　　function setPageBreak()
　　　　　　{
　　　　　　　　document.getElementById("p").style.pageBreakBefore="always";
　　　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<p>这是一个段落.</p>
　　　　<input type="button" onclick="setPageBreak()" value="哈哈" />
　　　　<p id="p">这是第二个段落.</p>
　　</body>
</html>

四、关于element的复选框在打印时没有选中

在无法打印组件样式的时候添加下面的css样式：如：el-checkbox

.el-checkbox__input {

-webkit-print-color-adjust: exact;

-moz-print-color-adjust: exact;

color-adjust: exact;

}