zoukankan      html  css  js  c++  java
  • vue ----》实现打印功能

    1.安装打印相关依赖

    cnpm install vue-print-nb --save

    2.安装后,在main.js文件中引入

    import Print from 'vue-print-nb'
    
    Vue.use(Print);  //注册

    3.在页面中直接进行调用

    <template>
        <div>
            <div id="printTest" style=" 100%;text-align:center">
                <p style="font-size:40px">哈哈哈</p>
                <el-table :data="tableData" style=" 60%;margin-left:100px">
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </div>
    
            <button v-print="'#printTest'">打印</button>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1518 弄"
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1517 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1516 弄"
                    }
                ]
            };
        }
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

    注意:打印的样式遵循页面的CSS样式;

       具体打印设置可直接在调用的打印机上进行格式的设置

       如果打印的内容有图片(即页面存在<img>标签),需将图片格式转换为  base64   或者   引用线上的图片地址

  • 相关阅读:
    Delphi中 StrToIntDef函数的用法:
    Delphi判断文件夹(目录)是否存在,不存在就创建一个,可以一次创建多级目录
    Delphi中Format的字符串格式化使用说明
    linux下可变参数打印
    c++11 thread
    QMessageBox 使用
    Ubuntu虚拟机配置nfs
    test
    Qt 布局时组建不贴边
    QPainter 居中写字
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/11850581.html
Copyright © 2011-2022 走看看