第三方网站嵌入“打印精灵”快速实现标签打印

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

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

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

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

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

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

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

。。。

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

原理

还是先说原理吧。

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

打印精灵官网 或 SpiritCenter 用户WEB网站 内网/外网 用户浏览器 third-edit get-acccess-token access-token get-label-list labels

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

第三方网站如果需要编辑标签, 跳转到(或内嵌到IFRAME中）https://www.printspirit.cn/third-edit?token=token&subclass=subclass&tpid=tpid, 即可打开编辑编辑。需要三个参数： subclass / tpid , 如果不设置tpid，表示新建。token通过get-access-token获取，

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

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

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

程序例子

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

spirit.php

 1<?php
 2define("SPIRIT_HOST", "https://www.printspirit.cn");
 3define("UID",  "third_test");
 4define("PASS", "third_test");
 5
 6function getAccessToken($uid, $pass) {
 7
 8	$apcuAvailabe = function_exists('apcu_enabled') && apcu_enabled();
 9	
10	if($apcuAvailabe){
11		$access_token = apcu_fetch('access_token');
12		$expirt_time = apcu_fetch('expirt_time');
13		if ( $access_token && $expirt_time > time() ) return $access_token;
14	}
15
16	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-access-token?userid=$uid&passwd=$pass"));
17
18	if ($rc!=NULL && $rc->rc=='OK') {
19		if($apcuAvailabe){
20			apcu_store('access_token', $rc->token);
21			apcu_store('expirt_time',  time() + $rc->expirt);
22		}
23		return $rc->token;
24	}	
25	die("无法获取TOKEN:".$rc->errmsg);
26}
27
28function getList($subclass="") {
29	$token = getAccessToken(UID, PASS);
30	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-label-list?token=${token}&subclass=${subclass}"), true);
31	if ($rc!=NULL && $rc['rc']=='OK') 	return $rc['data'];
32	return [];
33}
34
35function getContent($tpid) {
36	$token = getAccessToken(UID, PASS);
37	$rc=json_decode(file_get_contents(SPIRIT_HOST . "/api/get-label-content?token=${token}&tpid=${tpid}"), true);
38	if ($rc!=NULL && $rc['rc']=='OK') return $rc['data'];
39	return "";
40}
41
42function get_edit_url($subclass, $tpid="") {
43	$token = getAccessToken(UID, PASS);
44	return SPIRIT_HOST . "/third-edit?subclass=${subclass}&tpid=${tpid}&token=${token}";	
45}

该文件定义了4个函数：

  • getAccessToken()获取访问API的token, 调用任何API都需要access_token 需要注意的是，应将access_token缓存起来，在有效期内避免重复获取, 在示例程序中如果安装了PHP-APCu将自动缓存token。
  • getList($subclass) 返回$subclass指定类别的打印模板列表。如果不设定类别，返回该账户下的全部打印模板。
  • get_edit_url($subclass, $tpid) 获取编辑模板的url地址，如$tpid为空，创建新模板。$subclass指定保存类别。可以直接跳转到该地址，或嵌入IFRAME。
  • getContent($tpid) 获取模板内容

list.php

list.php调用getList()获取当前用户的全部打印模板，并列表显示出来，显示缩略图使用了/utils/thumb。每个模板后面有一个编辑按钮，最下面有一个新增按钮就调用edit.php。

 1<?php
 2require_once("spirit.php");
 3?>
 4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 5<html xmlns="http://www.w3.org/1999/xhtml">
 6    <head>
 7    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 8    <title>A Test Client for Spirit</title>
 9    </head>
10    <body>
11        <table style="width:50%; margin: 0 auto; border:1px solid #888">
12        <tr><th>标签名</th><th>子分类</th><th>缩略图</th></tr>
13        <?php 
14            $lst = getList();
15            foreach( $lst as $l) {
16                echo "<tr>";
17                echo "<td>${l['name']}</td>";
18                echo "<td>${l['subclass']}</td>";
19                /*显示缩略图*/
20                echo "<td><img height='100px' src='" . SPIRIT_HOST . "/utils/thumb?id=${l[id]}' /></td>";
21                echo "<td><a href='edit.php?subclass=${l['subclass']}&tpid=${l['id']}"'><button>编辑(嵌入)</button></a>"
22              	echo "<a href='<?="edit.php?subclass=${l['subclass']}&tpid=${l['id']}&target=new"'><button>编辑(跳转)</button></a></td>"
23                echo "</tr>\n";
24            }
25        ?>	
26        </table>
27        <div style="width:50%;margin:0 auto;padding:5px;text-align:right">
28	        <a href='edit.php?subclass="user1"'><button>新增标签</button></a>
29        <div>
30    </body>
31</html>

edit.php

编辑打印模板，通过get_edit_url(subclass, tpid)获取编辑url, 可以直接跳转，或嵌入IFRAME中。如tpid为空，创建新模板。 subclass指定保存的子类，例子中全部保存到user1，实际程序可以设置为第三方网站当前登录用户。

 1<?php
 2require_once("spirit.php");
 3$url=get_edit_url($_GET['subclass'], $_GET['tpid']);
 4
 5if (!empty($_GET['target']) && $_GET['target']=='new') {
 6    header("Location: " . $url);
 7    return;
 8}
 9?>
10<html xmlns="http://www.w3.org/1999/xhtml">
11  <body>
12  <div class="iframe">
13     <iframe src="<?php echo $url?>" />
14  </div>
15  </body>
16</html>

体验嵌入第三方网站效果，请下载第三方网站模拟程序。该程序在本机建立一个模拟网站， 通过打印精灵的第三方API, 实现标签的编辑、打印等功能。 同时，该程序提供了源码, 包括GO, PHP语言的范例程序， 供嵌入打印精灵时参考。 详见模拟第三方网站程序的使用。.

留言

登录