当前位置 博文首页 > q1424966670的博客：vue打印（二）

最大化 缩小

    q1424966670的博客：vue打印（二）

    作者：[db:作者] 时间：2021-08-27 18:45

    1、下载插件

    print.js

    2、放入plugins文件夹下

    3、在main.js引入

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

    ?4、使用例子

    注意点：

    1. 在需要打印的地方绑定ref
    2. 不需要打印的地方添加no-print样式类
    3. 打印方法：this.$print(this.$refs.xxx)，xxx代表你绑定的ref

    4. 也可以自定义不需要打印的样式类，使用方法如下：

    5. <div class="not-print-me">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.not-print-me'}) // 使用
    <el-dialog  ref="print" title="列操作" :visible.sync="colOprationVisible" width="600px" >
        <div  style="height:400px;overflow:auto;">
            <el-table :data="formList" style="width: 100%" border height="400" width="100%">
                <el-table-column align="center" width="100px" prop="prop"  label="列名"></el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.show" :active-value="1" :inactive-value="2" active-color="#409eff" inactive-color="#B9B9B9"
                        @change="changeSwitch(scope.row)"/>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer no-print">
            <el-button type="primary" @click="colOprationVisible = false">关 闭</el-button>
            <button @click="printTest">打印</button>
        </span>
    </el-dialog>
    printTest(){
    this.$print(this.$refs.print)
},

    cs
    上一篇：q1424966670的博客：vue-print-nb打印问题总结
    下一篇：没有了