2021-02-16

最新推荐文章于 2021-11-17 15:44:28 发布

lysccn

最新推荐文章于 2021-11-17 15:44:28 发布

阅读量171

点赞数

原文链接：http://www.printspirit.cn/blog/embeded_spirit.md

版权

本文介绍了如何将“打印精灵”的标签编辑器嵌入到第三方网站中，允许最终用户直接在网站上设计和打印标签。通过调用“打印精灵”的API，如get-access-token、get-label-list等，可以实现标签模板的列表展示、预览和编辑等功能。文章提供了一个PHP示例，展示了如何获取访问令牌、获取标签列表、编辑标签等内容，帮助开发者实现与“打印精灵”的无缝集成。

摘要由CSDN通过智能技术生成

将“打印精灵”嵌入到你的网站中

“打印精灵”提供的标签编辑器，通过拖拽就可以编辑出一个图文并茂的标签，并可以立刻在桌面打印机、移动打印机上打印出来。大大减少了开发打印程序时枯燥乏味的工作，让“程序猿”基本告别了：写代码-打印测试页-修改代码-再打印测试页的死循环，再复杂的标签基本都能一次搞定，苦逼的生活稍有改善。

但是只有懒惰的“程序猿”才是“好程序猿”，为了减少自己的工作，他们的想象力总是无限。最近有做网站的客户提出要求，说既然画标签已经这么简单了，能不能能让最终使用者来设计标签，把自己彻底解放出来，行不行啊？

行，当然行！“打印精灵”本来就是免费、开放的标签设计平台，让“最终用户”在“打印精灵”上注册一下，不就可以自己设计标签了，有什么难的？。。。。

但是。。。但是。。。客户说，恐怕没有这么简单：

比如最终用户确实可以在“打印精灵”上自己设计标签，但是如何和第三方网站建立关联呢？难道非要反人性的输入36位长的标签ID?

再比如都说用户是上帝，虽然设计标签挺简单，对文青来说，甚至还有点趣味，但是要让他们在客户网站上注册，然后又到“打印精灵”上来注册，会不会吓跑上帝？

再比如最终用户设计的的标签，能不能相互隔离，保密？

。。。

这些要求其实也不复杂，“打印精灵”提供了企业版功能，只要注册企业账户，就可以把“打印精灵”标签设计器嵌入到自己的网站中，上面的问题就迎刃而解了,如何才能做到呢？

原理
还是先说原理吧。

对于企业版用户，“打印精灵”提供了如下几个API:

http://www.printspirit.cn/api/get-access-token 获取访问token, 调用下面的API前需要先调用该API。
http://www.printspirit.cn/api/get-label-list
http://www.printspirit.cn/api/get-label-content
http://www.printspirit.cn/api/get-edit-token
第三方网站可以通过 get-label-list API 获取本企业的全部标签列表，调用时需要提供一个附加参数subclass，为自定的分类标识，最常见的用途是用来区分该企业下的最终用户。有了这几个API, 第三方企业网站可以按自己的需要分类列出各种标签模板, 进一步实现选择打印模板，显示预览，编辑等。

第三方网站如果需要编辑标签, 先调用 get-edit-token API 获取edit-token, 然后跳转到http://www.printspirit.cn/third-edit?token=XXXXX, 即可编辑。get-edit-token API 需要两个参数： subclass / label_id , 如果不设置label_id，表示新建。

第三方网站如果需要在自己的网站保存标签数据，可以使用 get-label-content API 获取标签的内容。

第三方网站如果需要在自己的网站预览标签，可以使用<img src="http://www.printspirit.cn/utils/thumb?id=label_id"/>

注意：要使用第三方API，请在“打印精灵”注册帐号后，联系客户开通API功能。测试时，可以使用third_test帐号，密码也是third_test。

程序例子
下面以PHP为例子，给出一个实例。程序包括三个文件: spirit.php为定义相关的函数， list.php显示模板列表， edit.php编辑模板，下面分别讲解。

spirit.php

<?php
define("SPIRIT_HOST", "http://www.printspirit.cn");
define("UID",  "third_test");
define("PASS", "third_test");

function getAccessToken($uid, $pass) {

	$apcuAvailabe = function_exists('apcu_enabled') && apcu_enabled();
	
	if($apcuAvailabe){
		$access_token = apcu_fetch('access_token');
		$expirt_time = apcu_fetch('expirt_time');
		if ( $access_token && $expirt_time > time() ) return $access_token;
	}

	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-access-token?userid=$uid&passwd=$pass"));

	if ($rc!=NULL && $rc->rc=='OK') {
		if($apcuAvailabe){
			apcu_store('access_token', $rc->token);
			apcu_store('expirt_time',  time() + $rc->expirt);
		}
		return $rc->token;
	}	
	die("无法获取TOKEN:".$rc->errmsg);
}

function getList($subclass="") {
	$token = getAccessToken(UID, PASS);
	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-label-list?token=${token}&subclass=${subclass}"), true);
	if ($rc!=NULL && $rc['rc']=='OK') 	return $rc['data'];
	return [];
}

function getContent($tpid) {
	$token = getAccessToken(UID, PASS);
	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-label-content?token=${token}&tpid=${tpid}"), true);
	if ($rc!=NULL && $rc['rc']=='OK') return $rc['data'];
	return "";
}

function edit($subclass, $tpid="") {
	$token = getAccessToken(UID, PASS);
	$rc=json_decode(file_get_contents( SPIRIT_HOST . "/api/get-edit-token?subclass=${subclass}&tpid=${tpid}&token=${token}"));
	
	if ($rc!=NULL && $rc->rc=='OK') 	{
		header("Location: " . SPIRIT_HOST . "/third-edit?token={$rc->edit_token}");
	}else{
		echo "不能编辑";
	}
}

该文件定义了4个函数：

getAccessToken()获取访问API的token, 调用任何API都需要access_token 需要注意的是，应将access_token缓存起来，在有效期内避免重复获取, 在示例程序中如果安装了PHP-APCu将自动缓存token。
getList( $s u b c l a s s) 返回$ subclass指定类别的打印模板列表。如果不设定类别，返回该账户下的全部打印模板。
edit($subclass, $t p i d) 编辑打印模板，如$ tpid为空，创建新模板。 $s u b c l a s s 指定保存类别。 g e t C o n t e n t ($ tpid) 获取模板内容
list.php

<?php
require_once("spirit.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A Test Client for Spirit</title>
    <style type="text/css" media="screen">
    </style>
    <script type="text/javascript">
    function edit(tpid) {
    	window.location.href = "edit.php?tpid=" + tpid;
    }
    </script>
  </head>
  <body>
  	<table style="width:50%; margin: 0 auto; border:1px solid #888">
  	<tr><th>标签名</th><th>子分类</th><th>图片</th></tr>
  	<?php 
  		$lst = getList("");
  		foreach( $lst as $l) {
	  		echo "<tr>";
	  		echo "<td>${l['name']}</td>";
	  		echo "<td>${l['subclass']}</td>";
	  		echo "<td><img height='100px' src='" . SPIRIT_HOST . "/utils/thumb?id=${l[id]}' /></td>";
	  		echo "<td><button onClick='edit(\"${l[id]}\")' >编辑</button></td>";
	  		echo "</tr>\n";
	  	}
  	?>	
  	</table>
  	<div style="width:50%;margin:0 auto;padding:5px;text-align:right">
  		<button onClick='edit("")' >新增标签</button>
  	<div>
  </body>
</html> 
edit.php
<?php
require_once("spirit.php");
edit("user1", $_GET['tpid']);