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

當(dāng)面對千千萬萬的打印格式需求時，這時可能需要使用打印模板。
但是后端使用客戶提供的模板，往往需要進(jìn)行“二次加工”。
所以
本文是提供給用戶的打印模板編輯器，用戶自定義模板，系統(tǒng)動態(tài)取值替換即可。
減少設(shè)計，開發(fā)，測試，運(yùn)維等一系列的時間成本。

用戶也是自己動手（系統(tǒng)還是要給初始模板），豐衣足食。

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

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

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

<template>
    <div>
        <div id="app">
            <div class="tembtn">
                <a-button type="primary" @click="print()">打印內(nèi)容</a-button>
                <a-button type="primary" @click="showTemplate()">顯示模板</a-button>
                <a-popconfirm
                    title="請勿將生成的示例作為模板,是否確認(rèn)保存模板?"
                    ok-text="確認(rèn)"
                    cancel-text="返回"
                    @confirm="saveTemplate">
                    <a-button type="primary">保存模版</a-button>
                </a-popconfirm>
                <a-button type="primary" @click="showData()">控制臺輸出數(shù)據(jù)</a-button>
                <a-button type="primary" @click="genTemplate()">按模板生成示例</a-button>
            </div>
            <br/>
            <div>
                <div style="width: 150px;float: left;">
                    <div v-for="t in printFmt" :key="t">
                        <input style="width: 140px;border: 1px solid #dddddd;margin-bottom: -1px;height: 33px;" @click="selectAll($event)" :value="t.name"/>
                    </div>
                </div>
                <div style="width: 820px;float: left;" >
                    <vue-ueditor-wrap ref="template"  @mousedown="checkTag" v-model="msg" :config="myConfig"></vue-ueditor-wrap>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
    export default {
        name: "setPrintTemplate",
        data() {
            return {
                msg: '',
                printFmt:[
                    {name:"【供應(yīng)商名稱】",value:'obj1.coustomName'},
                    {name:"【供應(yīng)商聯(lián)系人】",value:'obj1.coustomUserName'},
                    {name:"【供應(yīng)商手機(jī)】",value:'obj1.coustomPhone'},
                    {name:"【面料名稱-多行】",value:'tableData1.name'},
                    {name:"【面料規(guī)格-多行】",value:'tableData1.size'},
                    {name:"【面料單價-多行】",value:'tableData1.price'},
                    {name:"【面料數(shù)量-多行】",value:'tableData1.num'},
                    {name:"【面料金額-多行】",value:'tableData1.totalPrice'},
                    {name:"【面料數(shù)量合計】",value:'obj1.allTotalNum'},
                    {name:"【面料金額合計】",value:'obj1.allTotalPrice'},
                    {name:"【輔料名稱-多行】",value:'tableData2.name'},
                    {name:"【輔料規(guī)格-多行】",value:'tableData2.size'},
                    {name:"【輔料單價-多行】",value:'tableData2.price'},
                    {name:"【輔料數(shù)量-多行】",value:'tableData2.num'},
                ],
                data:{
                    obj1:{
                        coustomName:'廣州服飾有限公司',
                        coustomPhone:'15112345678',
                        coustomUserName:'張三',
                        allTotalNum:'60',
                        allTotalPrice:'910.00',
                    },
                    tableData1:[
                        {name:'面料A',size:'20m*10',price:'10.50',num:'20',totalPrice:'210.00'},
                        {name:'面料b',size:'20m*10',price:'15.00',num:'20',totalPrice:'300.00'},
                        {name:'面料c',size:'20m*10',price:'20.00',num:'20',totalPrice:'400.00'}
                    ],
                    tableData2:[
                        {name:'輔料A',size:'20m*10',price:'10.50',num:'20'},
                        {name:'輔料b',size:'20m*10',price:'15.00',num:'20'},
                    ]
                },
                
                myConfig: {
                    //工具欄 詳情查看  static/UEditor/ueditor.config.js
                    toolbars: [
                        [
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
                        'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'link', 'unlink', 'anchor', '|', 
                        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                        'print', 'preview', 'searchreplace'
                        ]
                    ],
                    
                    // 編輯器不自動被內(nèi)容撐高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 620,
                    // 初始容器寬度
                    initialFrameWidth: '100%',
                    // 上傳文件接口
                    serverUrl: '',
                    enableAutoSave: false,
                    elementPathEnable: false,
                    wordCount: false,
                    // UEditor 資源文件的存放路徑，建議使用遠(yuǎn)程單獨(dú)的cdn  格式可以是網(wǎng)絡(luò)路徑  UEDITOR_HOME_URL: 'http://test.com/static/UEditor/'
                    UEDITOR_HOME_URL: '/static/UEditor/'
                }
            }
        },
        mounted() {
            this.msg = localStorage.setPrintTemplate || ''
        },
        methods: {
            checkTag(){
                console.log(123)
            },
            selectAll(e){
                e.currentTarget.select()
            },
            saveTemplate() {
                localStorage.setPrintTemplate = this.msg;
                this.$message.success("保存成功！")
            },
            showTemplate(){
                this.msg = localStorage.setPrintTemplate;
                this.$message.success("獲取模板成功！")
            },
            showData(){
                console.log(this.data)
            },
            genTemplate(){
                var that = this;
                //獲取模板內(nèi)容
                // console.log(that.msg)
                //獲取數(shù)據(jù)鍵值對
                const map = new Map();
                for(var i=0;i<that.printFmt.length;i++){
                    var f = that.printFmt[i];
                    map.set(f.name,f.value);
                    if(f.name.indexOf("多行")==-1){//替換簡單鍵值對
                        that.msg = that.msg.replace(RegExp(f.name, "g"),this.data[f.value.split(".")[0]][f.value.split(".")[1]])//多級需要單獨(dú)的方法進(jìn)行處理
                    }
                }
                //替換表格鍵值對，考慮變成多行 
                //1.獲取tr行并 生成表格數(shù)據(jù)對應(yīng)的行數(shù)
                var regTable= /<\/tbody>.*?/g;
                var regTr = /<tr>.*?<\/tr>/g;
                var tagTr = /【.*?】/g;
                var tables = that.msg.split(regTable)
                for(var j=0;j<tables.length;j++){
                    var table = tables[j]
                    if(table.indexOf("多行")!=-1){
                        var newTable = table.replace(regTr, function(str) {
                            if(str.indexOf("多行")!=-1){
                                //根據(jù)第一個【xxx】獲取對應(yīng)的表格
                                var tagName = str.substr(str.indexOf("【"),str.indexOf("】")-str.indexOf("【")+1)
                                //獲取表格數(shù)據(jù)
                                var tableData = that.data[map.get(tagName).split(".")[0]]
                                //動態(tài)數(shù)據(jù)行
                                var dynamicRows = "";
                                for(var l=0;l<tableData.length;l++){
                                    var s = str.replace(tagTr, function(s1) {
                                        return tableData[l][map.get(s1).split(".")[1]]
                                    })
                                    dynamicRows+=s;
                                }
                                //按數(shù)據(jù)替換并組裝表格
                                return dynamicRows;
                            }else{
                                return str;
                            }
                        })
                        that.msg = that.msg.replace(table,newTable);
                    }
                }
            },
            print() {
                var that = this;
                var ue = that.$refs.template.editor;
                ue.execCommand('print');
            }
        },
    }
</script>

<style>
    .tembtn button{
        margin-top: 10px;
        margin-right: 10px;
    }
</style>

測試模板


image.png

打印效果（打印需要取消顯示頭部）


image.png
image.png

模板數(shù)據(jù)

<p style="text-align: center;">
    <span style="font-family: 宋體, SimSun;"><strong style="font-size: 36px;">入庫單</strong><strong style="font-size: 36px;"></strong></span>
</p>
<table align="center">
    <tbody>
        <tr class="firstRow">
            <td valign="top" colspan="1" rowspan="1" width="126" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>供應(yīng)商名稱</strong></span>
            </td>
            <td valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;" rowspan="1" colspan="3" width="587">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【供應(yīng)商名稱】</span><br/>
            </td>
        </tr>
        <tr>
            <td valign="top" colspan="1" rowspan="1" width="126" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun;"><strong><span style="font-family: 宋體, SimSun; font-size: 14px;">聯(lián)系人</span></strong></span>
            </td>
            <td width="285" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <p>
                    <span style="font-family: 宋體, SimSun; font-size: 14px;">【供應(yīng)商聯(lián)系人】<br/></span>
                </p>
            </td>
            <td width="132" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>聯(lián)系方式</strong></span>
            </td>
            <td width="128" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun;"><strong style="font-family: 宋體, SimSun;"><span style="font-size: 14px; font-family: 隸書, SimLi;">&nbsp;</span></strong><span style="font-size: 14px; font-family: 宋體, SimSun;">【供應(yīng)商手機(jī)】</span><br/></span>
            </td>
        </tr>
    </tbody>
</table>
<p>
    <span style="font-family: 宋體, SimSun;">表1</span>
</p>
<table style="" align="center">
    <tbody>
        <tr class="firstRow">
            <td width="130" valign="top" style="border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;"><strong>面料名稱</strong></span>
            </td>
            <td width="130" valign="top" style="border-width: 1px; border-style: solid;">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>面料規(guī)格<br/></strong></span>
            </td>
            <td width="132" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="right">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>單價（元）</strong></span>
            </td>
            <td width="131" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="right">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>數(shù)量</strong></span>
            </td>
            <td width="129" valign="middle" align="right" style="border-width: 1px; border-style: solid;">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>金額</strong></span>
            </td>
        </tr>
        <tr>
            <td width="130" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【面料名稱-多行】<br/></span>
            </td>
            <td width="130" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【面料規(guī)格-多行】<br/></span>
            </td>
            <td width="132" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="right">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【面料單價-多行】<br/></span>
            </td>
            <td width="131" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="right">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【面料數(shù)量-多行】<br/></span>
            </td>
            <td width="129" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="right">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【面料金額-多行】<br/></span>
            </td>
        </tr>
        <tr>
            <td valign="middle" colspan="3" rowspan="1" style="border-width: 1px; border-style: solid; word-break: break-all;" align="right">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>合計</strong><br/></span>
            </td>
            <td valign="middle" colspan="1" rowspan="1" align="right" style="border-width: 1px; border-style: solid; word-break: break-all;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【面料數(shù)量合計】<br/></span>
            </td>
            <td valign="middle" colspan="1" rowspan="1" align="right" style="border-width: 1px; border-style: solid;" width="129">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【面料金額合計】<br/></span>
            </td>
        </tr>
    </tbody>
</table>
<p>
    <span style="font-family: 宋體, SimSun;">表2</span>
</p>
<table align="center" width="-149">
    <tbody>
        <tr class="firstRow">
            <td width="130" valign="top" style="border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;"><strong>輔料名稱</strong></span>
            </td>
            <td width="130" valign="top" style="border-width: 1px; border-style: solid; word-break: break-all;">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong><strong style="white-space: normal;">輔</strong>料規(guī)格<br/></strong></span>
            </td>
            <td width="132" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="right">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong>單價（元）</strong></span>
            </td>
            <td valign="middle" colspan="1" rowspan="1" width="131" align="right" style="border-width: 1px; border-style: solid;">
                <span style="font-size: 14px; font-family: 宋體, SimSun;"><strong style="white-space: normal;">數(shù)量</strong></span>
            </td>
        </tr>
        <tr>
            <td width="130" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【輔料名稱-多行】<br/></span>
            </td>
            <td width="130" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【輔料規(guī)格-多行】<br/></span>
            </td>
            <td width="132" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="right">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【輔料單價-多行】<br/></span>
            </td>
            <td valign="middle" colspan="1" rowspan="1" width="131" align="right" style="border-width: 1px; border-style: solid;">
                <span style="font-family: 宋體, SimSun; font-size: 14px;">【輔料數(shù)量-多行】<br/></span>
            </td>
        </tr>
    </tbody>
</table>
<p>
    <span style="font-family: 宋體, SimSun;"><strong style="font-size: 14px;"><span style="font-family: 宋體, SimSun; color: rgb(255, 0, 0);">收貨簽字</span></strong><br/></span>
</p>

利用關(guān)鍵字“多行”，尋找對應(yīng)數(shù)組的條數(shù)，動態(tài)插入數(shù)據(jù)行，疊加返回
1.需要了解split
把常用的逗號換成了關(guān)鍵字table一樣，切不同的表數(shù)據(jù)進(jìn)行處理“多行”
var regTable= /</tbody>.*?/g;
切分后包含tbody的數(shù)組 = that.msg.split(regTable)

2.需要了解replace
轉(zhuǎn)換后的值 = str.replace(正則表達(dá)式, function(符合正則的每一個數(shù)據(jù)) {
返回替換后的新數(shù)據(jù)
return tableData[l][map.get(s1).split(".")[1]]
})

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容