zoukankan      html  css  js  c++  java
  • vue——引入print.js实现多页打印

    搬运自:https://segmentfault.com/a/1190000021913990?utm_source=tag-newest

    1. 下载print.js

        

    https://github.com/zxc19890923/print/blob/master/print.js
    
    在src目录下面创建plugins/print/Print.js文件保存插件内容,其他位置也可

     

    2. 修改print.js  

    // 搜索getStyle方法,添加:str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
    
     getStyle: function () {
        var str = "",
          styles = document.querySelectorAll('style,link');
        for (var i = 0; i < styles.length; i++) {
          str += styles[i].outerHTML;
        }
        str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
        str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
    
        return str;
      },

     

    3.main.js中引入插件

    ...
    import Print from './plugins/print/Print'
    Vue.use(Print)

    4.  vue文件中使用

    <div class="show">
           // 这是展示的需要打印的内容,给用户看的。
        </div>
        <div ref="print" class="recordImg" id="print">
           //这里是需要打印的内容,出现在打印预览的界面,这里的样式需要写在 @media print {}里面 如果需要设置预览页规则,页脚等样式 @page {} 
           <div class="no-print">不需要打印的内容</div>
           <div class="do-not-print-div">不要打印我</div> 
           <button @click="printContext">打印</button>
        </div>
        ...
        <script>
            ...
            method: {
                printContext () {
                    this.$print(this.$refs.print)
                }
                // 不打印方法1. 添加no-print样式类
                // 不打印方法2. this.$print(this.$refs.print,{'no-print':'.do-not-print-div'})
            }
        </script>

    最近发现个问题:项目用的是vue + elementUI实现,页面中有表格,打印预览时发现表格右边会超出隐藏。

    原因: 表格宽度设置的100%,表格每列也按百分比来设置的,打印预览时的宽度比正常页面小,但表格总宽度还是按正常页面来的,所以会超出隐藏。

    解决:表格每列按固定宽度px设置,最后一列打印样式—文字居左

  • 相关阅读:
    Unable to connect to Command Metric Stream 'api/turbine/stream?cluster=REPORTS' Error: {"isTrusted"}
    Spring Boot Admin 1.5.7
    Druid Spring Boot Starter
    09: mysql基础面试题
    08: mysql主从原理
    07: mysql锁和事物隔离
    06: mysql索引查找原理及调优
    05: MySQL高级查询
    04: Mysql性能优化
    02: MySQL的安装与基本配置
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13097977.html
Copyright © 2011-2022 走看看