React实现H5模版导出

需求

因为后端需要拿到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里。如下所示：

最后的效果如下：

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