VUE使用富文本自定义打印模板

当面对千千万万的打印格式需求时，这时可能需要使用打印模板。
但是后端使用客户提供的模板，往往需要进行“二次加工”。
所以
本文是提供给用户的打印模板编辑器，用户自定义模板，系统动态取值替换即可。
减少设计，开发，测试，运维等一系列的时间成本。

用户也是自己动手（系统还是要给初始模板），丰衣足食。

vue.config.js 或index.html 引入js
https://cdn.jsdelivr.net/npm/vue-ueditor-wrap@latest/lib/vue-ueditor-wrap.min.js
当然也可以npm install vue-ueditor-wrap

main.js 注册组件
Vue.component('vue-ueditor-wrap', window.VueUeditorWrap)

引入UEditor包到public/static 或者放在某个cdn目录 下方配置引入即可

测试模板

image.png

打印效果（打印需要取消显示头部）

image.png

image.png

模板数据

    入库单


    

        

            

                供应商名称
            
            

                【供应商名称】

            
        
        

            

                联系人
            
            

                

                    【供应商联系人】

                
            
            

                联系方式
            
            

                 【供应商手机】

            
        
    


    表1


    

        

            

                面料名称
            
            

                面料规格

            
            

                单价（元）
            
            

                数量
            
            

                金额
            
        
        

            

                【面料名称-多行】

            
            

                【面料规格-多行】

            
            

                【面料单价-多行】

            
            

                【面料数量-多行】

            
            

                【面料金额-多行】

            
        
        

            

                合计

            
            

                【面料数量合计】

            
            

                【面料金额合计】

            
        
    


    表2


    

        

            

                辅料名称
            
            

                辅料规格

            
            

                单价（元）
            
            

                数量
            
        
        

            

                【辅料名称-多行】

            
            

                【辅料规格-多行】

            
            

                【辅料单价-多行】

            
            

                【辅料数量-多行】

            
        
    


    收货签字

利用关键字“多行”，寻找对应数组的条数，动态插入数据行，叠加返回
1.需要了解split
把常用的逗号换成了关键字table一样，切不同的表数据进行处理“多行”
var regTable= /.*?/g;
切分后包含tbody的数组 = that.msg.split(regTable)

2.需要了解replace
转换后的值 = str.replace(正则表达式, function(符合正则的每一个数据) {
返回替换后的新数据
return tableData[l][map.get(s1).split(".")[1]]
})