vue打印插件的使用

最新推荐文章于 2025-06-18 15:31:40 发布

qq_36845014

最新推荐文章于 2025-06-18 15:31:40 发布

阅读量7.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_36845014/article/details/84524583

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在Vue项目中安装并使用vue-easy-print组件，实现网页内容的打印功能。包括npm安装、组件导入、模板加载及配置参数说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步:

npm install vue-easy-print --save

第二步，在你的vue页面里

import vueEasyPrint from "vue-easy-print";
import demo from './your path/demo';

// in your vue <script>
export default {
    components: {
        vueEasyPrint,
        demo
    }
}

第三步，加载模板:

<vue-easy-print tableShow>
    <template slot-scope="func">
        <demo :getChineseNumber="func.getChineseNumber"></demo>
    </template>
</vue-easy-print>

slot-scope

func.getChineseNumber接收到的方法是一个将金额转换成中文的

配置props参数

        // 针对分页表格模式：末尾空白行插入
        spaceRow: {
            type:Boolean,
            default:false,
        },

        // 针对分页表格模式：传入的打印数据。
        tableData:{
            type:Object,
            default() {
                return undefined
            }
        },
        // 是否显示表格
        tableShow:{
            type:Boolean,
            default:false
        },
        // 每页多少行
        onePageRow: {
            type:Number,
            default:5,
        },
        // 复制打印页面前调用的钩子
        beforeCopy:Function,
        // 打印页面前调用的钩子
        beforePrint:Function,