美文网首页
实现打印

实现打印

作者: 孤独的豺狼 | 来源:发表于2020-05-06 10:20 被阅读0次

接到一个需求,需要使用到打印这个功能,百度了一下网上给我2种解决方案,1是使用vue-print-nb来完成打印,但是他又一个问题就是内容打印不全,在打印操作时点击更多设置,然后设置缩放,2是需要引入一个js库,感觉这2种方法都是不是特别简单,经过前辈的帮忙,使用print-js来解决这一问题,话不多说,直接上代码

cnpm i print-js -S
<template>
    <div>
        <div id="report-content">
      <p>锄禾日当午</p>
      <p>汗滴禾下土 </p>
      <p>谁知盘中餐</p>
      <p>粒粒皆辛苦</p>
    </div>
    <button @click="printTest">打印</button>
    </div>
</template>
<script>
    import Print from 'print-js';
export default {
    data(){
        return{
        }
    },
    methods:{
        printTest(){
            Print({
              printable: 'report-content',
              type: 'html',
              // 继承原来的所有样式
              targetStyles: ['*'],
              documentTitle: '唐诗',
              honorMarginPadding: false
            });
        }
    }
}
   
</script>
<style type="text/css">
    #report-content{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        border: 1px dashed #999;
    }
    p{
        color: red;
    }
</style>

小编亲测,效果有保障,有啥错误可以留言一起解决

相关文章

  • 【vue学习】整合Lodop

    前端实现自动打印 批量打印 vue中使用lodop调用标签打印机 利用lodop打印控件轻松实现批量打印 本文主要...

  • 实现打印

    接到一个需求,需要使用到打印这个功能,百度了一下网上给我2种解决方案,1是使用vue-print-nb来完成打印,...

  • Android 日志工具包

    1). 实现效果图 2). 实现思路 绘制边框 打印线程名称 打印堆栈信息 打印消息体 3). 边框绘制 边框实际...

  • Word技巧:如何设置能够实现双面打印?

    微信小伙伴有人问到,要打印培训讲义,要双面打印,用word如何实现? 问题:如何实现文档的双面打印? 解答:利用W...

  • app连接蓝牙打印机实现打印

    app连接蓝牙打印机实现打印并排版_鬼妖妖的博客-CSDN博客_app蓝牙打印

  • 一道线程面试题

    2个线程交替打印1-100内的数,线程A打印偶数,线程B打印奇数 打印结果如下: 实现代码

  • 字符串的分割

    问题要求: 代码实现: 打印结果:

  • 利用C-Lodop实现iOS移动端打印

    C-Lodop可以实现局域网内,通过手机直接打印。其原理是手机端加载html文件,局域网内的打印机就能实现打印了,...

  • js实现打印

    原文作者:匆匆那年_海,博客主页:https://www.jianshu.com/u/910c0667c51595...

  • jquery实现打印

    jquery实现打印 jquery.jqprint-0.3.js下载 提取码:vxga html css(必须引入...

网友评论

      本文标题:实现打印

      本文链接:https://www.haomeiwen.com/subject/adjightx.html