vue中实现打印的几种方式 - 掘金

一、vue-print-nb插件

1、安装依赖

npm install vue-print-nb --save
复制代码

2、在min.js中全局注册

 import Print from 'vue-print-nb' //引入

Vue.use(Print);  //全局注册
复制代码

3、页面使用方式一

<div id="printTest" >

　　<p>我是打印区域</p>

</div>
  
<button v-print="'#printTest'">打印</button>    
复制代码

4、页面使用方式二

<div id="printTest" >

　　<p>我是打印区域</p>

</div>
  
<button v-print="printTest">打印</button>

data() {
    return {
     printTest:{
                    id: 'nbprint', // 打印元素的id 不需要携带#号
                    popTitle: '页眉标题' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
                },
  },
复制代码

当需要打印的部分有本地图片时，打印之后图片可能不会显示。

二、print.js插件 ：解决了无法打印本地图片的问题

1、安装依赖

npm install print-js --save
复制代码

2、页面使用方式

import print from 'print-is'

<div id='printBill'>
    <p>我是打印区域</p>
</div>
<el-button type="primary"  @click="dayin">打印</el-button>

dayin(){
      printJS({
        printable: 'printBill',// 标签元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      });
      //各个配置项
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json时所需要的数据属性。
      //gridHeaderStyle和gridStyle都是打印json时可选的样式。
      //repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。
      //scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果
      //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
      //style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。
      //ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用
    },
复制代码

三、通过iframe标签实现打印(我当前使用的)

1、完成需要打印页面，先布局自己想打印的内容

2、在vue页面中使用一个iframe标签引入需要打印的页面

<iframe
      style="position: absolute; top: -1000px; left: -1000px; width: 100%"
      id="print"
      ref="print"
      :src="iframeSrc"
    >
</iframe>
复制代码

3、vue中需要做的事

<el-button type="primary"  @click="dayin">打印</el-button>

dayin(item){
  let iframe = document.getElementById('print');//获取iframe标签相当于获取了打印的区域了
  this.iframeWin.postMessage({
  cmd:'getFormJson',
  info:{//vue传给iframe页面的数据
   fontsize:this.font_size,
    },
  },'*');
  setTimeout(() => {
    this.$refs.print.contentWindow.print();//延迟半秒开始打印
   }, 500);        
},
复制代码

4、iframe页面做的事

在页面启动函数中写上下面语句
window.addEventListener("message", (e) => {//自己定义的一个监听的message
  console.log(e)
  this.pType = e.data.info//vue传的数据
});
复制代码

注意:使用elementUI表格打印时，会出现样式问题,表格超出打印页面,无法调试,原因是el的表格宽度是固定的,最好是使用原生table来写

原网址: 访问
创建于: 2023-08-09 18:59:12
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论