Browse Source

feat: 字体加载异常处理

zhangyuhan 3 years ago
parent
commit
b03060fe43
1 changed files with 60 additions and 40 deletions
  1. 60 40
      src/web/templates/pc/previewData.html

+ 60 - 40
src/web/templates/pc/previewData.html

@@ -5,24 +5,24 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 		<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/dataExport/css/previewData.css?v={{Msg "seo" "version"}}">
 		<script src="https://cdn.bootcss.com/js-polyfills/0.1.42/polyfill.min.js"></script>
+		<script src="https://cdn.bootcdn.net/ajax/libs/fontfaceobserver/2.1.0/fontfaceobserver.js"></script>
 		<script src="{{Msg "seo" "cdn"}}/dataExport/js/html2canvas.min.js"></script>
 		<script src="{{Msg "seo" "cdn"}}/js/jquery.js"></script>
 		<title>预览数据</title>
 		<style>
 			@font-face {
 				font-style: normal;
-			  font-weight: normal;
+				font-weight: normal;
 				font-family: 'MyNewFont';
 				src: url('/fonts/ttf/{{.T.ttf}}.eot');  /* IE 9 - 11 */
-    		src: url('/fonts/ttf/{{.T.ttf}}.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
-				url("/fonts/ttf/{{.T.ttf}}.ttf") format("truetype");  /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
+				src: url('/fonts/ttf/{{.T.ttf}}.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
+				url("{{Msg "seo" "cdn"}}/fonts/ttf/{{.T.ttf}}.ttf") format("truetype");  /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
 			}
 			.mosaic-text {
 				display: inline !important;
 				color: transparent !important;
 				text-shadow: 0 0 10px rgba(0,0,0,0.5);
 			}
-
 		</style>
 		<script>
 			var index=1;
@@ -72,21 +72,21 @@
             <td>{{$v.projectname}}</td>
 						<td>{{$v.detail}}</td>
             <td>{{$v.url}}</td>
-						
+
 					</tr>
 					{{end}}
 				</table>
 			{{else}}
-			<body style="min-width:2820px;">	
+			<body style="min-width:2820px;">
 				<table class="d_gj" cellspacing="0" cellpadding="0">
 				<tr>
 					<td rowspan=2>序号</td>
           <td rowspan=2>省份</td>
 					<td rowspan=2>城市</td>
 					<td rowspan=2>公告标题</td>
-          <td rowspan=2>公告类别</td>     
+          <td rowspan=2>公告类别</td>
 					<td rowspan=2>公告内容</td>
-          <td rowspan=2>发布时间</td>          
+          <td rowspan=2>发布时间</td>
 					<td rowspan=2>公告地址</td>
           <td rowspan=2>剑鱼标讯地址</td>
           <td rowspan=2>项目名称</td>
@@ -96,25 +96,25 @@
           <td rowspan=2>中标金额<br>(万元)</td>
           <td rowspan=2>开标日期</td>
           <td colspan=3>采购单位信息</td>
-          <td rowspan=2>招标代理机构</td>	
-          <td colspan=3>中标单位信息(来源:招标公告网站)</td>	
-          <td colspan=3>中标单位信息(来源:国家企业公示网站)</td>	
+          <td rowspan=2>招标代理机构</td>
+          <td colspan=3>中标单位信息(来源:招标公告网站)</td>
+          <td colspan=3>中标单位信息(来源:国家企业公示网站)</td>
 				</tr>
         <tr>
           <td>单位名称</td>
 					<td>联系人</td>
 					<td>联系电话</td>
-          
+
           <td>单位名称</td>
           <td>联系人</td>
           <td>联系电话</td>
-          
+
           <td>联系人</td>
           <td>联系电话</td>
           <td>电子邮箱</td>
         </tr>
-        
-        
+
+
 				{{range $i, $v := .T.data}}
 				<tr class="content">
 					<td>
@@ -126,8 +126,8 @@
 					<td>{{$v.city}}</td>
 					<td>{{$v.title}}</td>
           <td>{{$v.subtype}}</td>
-					<td>{{$v.detail}}</td>	
-          <td>{{$v.publishtime}}</td>		
+					<td>{{$v.detail}}</td>
+          <td>{{$v.publishtime}}</td>
 					<td>{{$v.href}}</td>
           <td>{{$v.url}}</td>
           <td>{{$v.projectname}}</td>
@@ -143,12 +143,12 @@
           <td>{{$v.s_winner}}</td>
           <td name="name">{{$v.winnerperson}}</td>
           <td name="phone">{{$v.winnertel}}</td>
-          
+
           <td name="name">{{$v.legal_person}}</td>
           <td name="phone">{{$v.company_phone}}</td>
           <td>{{$v.company_email}}</td>
-          
-					
+
+
 				</tr>
 				{{end}}
 			</table>
@@ -157,6 +157,27 @@
 			</div>
 	</body>
 	<script>
+	// 字体加载异常处理
+	try {
+		document.fonts.ready.then(function() {
+			renderImg()
+		});
+	} catch (err) {
+		console.log(err)
+	}
+	try {
+		var font = new FontFaceObserver('MyNewFont');
+		font.load().then(function () {
+			var html = document.querySelector('body');
+			html.classList.add('font-loaded');
+			renderImg()
+		}, function () {
+			console.log('Font is not available');
+		});
+	} catch (err) {
+		console.log(err)
+	}
+
 	var ttf={{.T.ttf}}
 	function textFormatForMosaic (text, phone) {
 		if (typeof text === 'string' || typeof text == 'number') {
@@ -175,27 +196,26 @@
 		return money
 	}
 
-	$(function(){
+	$("td[name='name']").each(function () {
+		$(this).html(textFormatForMosaic($(this).text()))
+	})
+	$("td[name='phone']").each(function () {
+		$(this).html(textFormatForMosaic($(this).text(), true))
+	})
+	$("td[name='money']").each(function () {
+		$(this).html(moneyFormatForCover($(this).text()))
+	})
 
-			$("td[name='name']").each(function () {
-				$(this).html(textFormatForMosaic($(this).text()))
-			})
-			$("td[name='phone']").each(function () {
-				$(this).html(textFormatForMosaic($(this).text(), true))
-			})
-			$("td[name='money']").each(function () {
-				$(this).html(moneyFormatForCover($(this).text()))
-			})
-
-			var w=$("table").width();
-			var h=$("table").height();
-			$(".sy").width($("table").width()).height($("table").height());
-			html2canvas(document.querySelector("body")).then(function(canvas){
-					var url=canvas.toDataURL('image/png');
-					$("body").append("<img class=\"fimg\" src=\""+url+"\">")
-					$("body img").width(w);
-			});
+	function renderImg () {
+		var w=$("table").width();
+		var h=$("table").height();
+		$(".sy").width($("table").width()).height($("table").height());
+		html2canvas(document.querySelector("body")).then(function(canvas){
+			var url=canvas.toDataURL('image/png');
+			$("body").append("<img class=\"fimg\" src=\""+url+"\">")
+			$("body img").width(w);
 		});
+	}
 	</script>
 {{include "/common/baiducc.html"}}
-</html>
+</html>