zoukankan      html  css  js  c++  java
  • vue + element ui 打印

    使用方式
    安装 npm install vue-print-nb --save
     
    在main.js文件中注册
    import Print from 'vue-print-nb'
    Vue.use(Print);
     
    1.对象打印方式
    <div>
    <div id="printMe">
    <div class="goodsStyle demo-flex">
    <span class="orderStyle goodsInfos" style="font-size:26px;color: #000;font-weight: 600;">{{goodsInfo.productName}}</span>
    </div>
    </div>
    <div style="text-align: center;margin-top: 20px">
    <el-button size="small" ref="btn" type="primary" class="printObjDy" @click="handleprint(printObj)" v-print="printObj">打 印</el-button>
    </div>
    </div>

    export default {
    name: "index",
    data() {
    return {
    printObj: {
    id: "printMe",
    popTitle: '订单',
    extraCss: '',
    extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
    }
    }
    },
    mounted() {
    setTimeout(() => {
    this.$refs.btn.$el.click()
    }, 1000)

    },
    created() {
    this.handleprint();
    },
    methods: {
    handleprint(val) {
    console.log(val)
    console.log(111)
    },
    }
    }
    上面是对象打印方式,红色字体是必须要的,  id="printMe"  下的内容是需要打印出来的内容,上面代码实现的功能是默认打开打印预览框,打印出的样式最好写行内样式,不然识别不了样式
     
     
    2.id打印方式

    <div id="printDiv">打印的内容</div>

    <button v-print="'#printDiv'">打印</button>

     
     
     
     
     
     
  • 相关阅读:
    8051单片机指令和寻址方式
    C/C++的关系
    go JSON 读写到文件
    Oracle 对未提交事务的查询
    win8 iis 安装
    Silverlight 项目 对话框
    VisualSVN错误 Cannot query proxy blanket解决办法
    silverlight浏览器自适应问题
    windows server2003 多用户登陆问题解决办法
    silverlight 缺少对象错误
  • 原文地址:https://www.cnblogs.com/5huihui/p/14003957.html
Copyright © 2011-2022 走看看