vue模板打印

最新推荐文章于 2025-03-03 20:23:45 发布

feng_0018

最新推荐文章于 2025-03-03 20:23:45 发布

阅读量3.7k

点赞数 1

分类专栏： JAVA 前端文章标签： vue 打印

本文链接：https://blog.youkuaiyun.com/m0_38005707/article/details/87706882

版权

本文介绍了如何在Vue框架下实现模板打印。通过创建隐藏的DOM节点作为打印容器，利用Vue的双向数据绑定特性，动态填充模板并结合ajax请求获取模板内容。在获取到静态HTML模板后，根据需求填充数据，并展示在打印容器中，实现灵活的打印功能。

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

Vue是一套构建用户界面的渐进式框架。
它实现了数据双向的绑定。利用这个特性，可以比较容易将模板与数据分离。在应对不同的不同的打印需求时，我们只需要提供足够丰富的数据，不同模板按照需求获取相应的字段即可。

创建容器
打印之前，需要把页面呈现在页面上。所以先创建一个隐藏的DOM节点，作为打印内容的容器。

class="hidden" 在bootstrap框架中相当于style="display: none"

获取模板
根据需求选择对应的模板，向服务端发送ajax请求，获取空模板。获取到空模版之后，利用Vue双向绑定的特性，向模板填充数据。然后将填充好的模板，填充上边创建的容器中。

$.getJSON(‘ins_common.do?action=get_print_template’, {mbdm: ‘0003’}, function (res) {

    if (res.code === 'T') {
        var $print = $('#id_print');
        $print.html(res.message);
        //创建Vue对象与打印容器绑定
        new Vue({
            el: '#id_print',
            data: {
                LRXM:'李四',
                CH:'12'
            }

        });
    } else {
        wnform.toast(res.message);
    }

})

模板是静态的html