需求

因为后端需要拿到html片段，所以前端获取到数据后需要把值填入html模版中传给后端。
我们使用mustache模版引擎
贴上地址：https://github.com/janl/mustache.js/

下面讲下具体操作

导入mustache库后
在代码中引入
import Mustache from 'mustache'
使用如下

Mustache.parse(Fpublic.htmlToString());
let html = Mustache.render(Fpublic.htmlToString(), this.getInputHtmlData());

Fpublic.htmlToString() 为html模版
this.getInputHtmlData() 为传入的数据

下面就拿模版举个例子

我的模版函数定义如下：

如果你需要导出类似下图的样式

在模版中的写法如下：

    '   <ul class="py-standard-abstract-body">',
            '{{#products}}' +
            ' {{#title}}<li><span>{{.}}</li></span>{{/title}}' +
            '{{/products}}',
    '   </ul>',

数据格式：products：[{title:'name'}]

如果你想设置文本样式

如下图涨跌幅为负显示绿色，为正显示红色

那么你需要插入带样式的标签，保留带样式的标签模版写法如下

                    '               <td>上证指数</td>',
            '               <td>{{{name1}}}</td>',
            '           </tr>',
            '           <tr>',
            '               <td>深证成指</td>',
            '               <td>{{{name2}}}</td>',
            '           </tr>',
            '           <tr>',
            '               <td>创业板指</td>',
            '               <td>{{{name3}}}</td>',
            '           </tr>',
            '           <tr>',
            '               <td>恒生指数</td>',
            '               <td>{{{name4}}}</td>',
            '           </tr>',

你需要在代码中去做逻辑判断，然后将值写入标签的style中。
上数据：

直接上代码：

                let color;
        if (thisState.indexArray[i].rate<0){
            color = '#00B050'
        }else if (thisState.indexArray[i].rate>0){
            color = '#FF0000'
        }else{
            color = '#000000'
        }
        return `<span style="color:${color}">${data}</span>`

如果你要导出的格式为段落

写法如下

'{{#information_content}}'+
'<h3>{{title1}}</h3>'+
'{{#content1}}<p>{{.}}</p>{{/content1}}'+
'{{/information_content}}',

content1为数组，{{.}}会自动轮训出数组中的值

如果你要导出的是动态表格

写法如下

'{{#tfProductArray}}'+
'       <tr>'+
'           <td><span style="font-weight: 700;">{{productName}}</span></td>'+
'           <td>{{term}}</td>'+
'           <td>{{benchmark}}</td>'+
'           <td>{{investStart}}</td>'+
'           <td>{{salePeriod}}</td>'+
'           <td>{{establishDate}}</td>'+
'           <td>{{expireDate}}</td>'+
'       </tr>'+
'{{/tfProductArray}}',

表格数据也是一个数组对象：tfProductArray: [{…}]

图文混排

先上代码

              /**
         *分析专栏整合
         * */
        let analysisArray = [];
        thisState.analysisArray.forEach((item)=>{
            let arrayDate = JSON.parse(item.analysis)
            arrayDate.forEach((item)=>{
                if (item.id === '1'){
                    item.content = `<h3>${item.content}</h3>`
                }
                if (item.id === '4'){
                    item.content = `<p>${item.content}</p>`
                }
                if (item.id === '3'){
                    item.content = `<p>${item.content}</p>`
                }
                if (item.id === '2'){
                    item.content = `<img src=${item.image} alt="img artiste"/>`
                }
            })
            analysisArray.push({data:arrayDate})
        })

图片和段落是不同的标签，所以需要分开处理。录入数据时，分了四种类型。分别是标题，图片，图片说明，段落。因为涉及到位置问题，所以数据中的排列不要混乱。

下面是html模版：

'{{#analysis}}',
'{{#data}}{{{content}}}{{/data}}',
'{{/analysis}}',

{{{}}}表示加载html标签内容，不会处理成字符串格式。
特别提示：插入的图片需要转化为base64

如果你导出的html需要样式，你需要把style标签放到div里。如下所示：

截屏2021-05-10 下午4.31.27.png

最后的效果如下：

截屏2021-05-10 下午4.32.52.png

觉得有帮助的可以点个赞再走，欢迎私信交流！！！