PDF Viewer集成手册

1. 快速接入

  1. 将Viewer资源包存放到业务端项目中，资源包截图如下：
  2. 创建网页集成Viewer资源，代码参考如下：
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>预览模型</title>
	<style>
		html, body, #iframeDiv,iframe  { position: relative; height: 100%; width: 100%; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow-y: hidden; }
	</style>
</head>

<body>
	<!-- 用于放模型展示的iframe，id不能修改 -->
	<div id="iframeDiv"> </div>
</body>
<!-- 引入公共控制类，用于控制模型外部数据传递-->
<script src="pdf_viewer.js"></script>
<script>
	window.onload = function () {
		nd_pdfViewCtrl.init({
			src: './png',		// 轻量化文件路径
		});	
	}
</script>

</html>
  3. 编辑pdf_viewer.js文件内容，代码参考:
    var nd_pdfViewCtrl = {
  src: '',
  allTags: [],
  defaultPage: 1, // 默认打开第几页
  init: function(opt) {
    this.src = opt.src;
	document.querySelector("#iframeDiv").innerHTML = '<iframe id="viewer" src="index.html" allowFullScreen></iframe>';
  },
  initLoad: function() {
    console.log('模型加载完成');
  },
  screenshot: function() {
    document.getElementById("pdfViewer").contentWindow.nd_screenshot(function(img){
      console.log('获取截图', img);
    });
  },
  getTotalpage: function() {
    var _contentWindow = document.getElementById("pdfViewer").contentWindow;
		return contentWindow.nd_getTotalPage();
	},
  addTags: function (a, cc) {  // 添加文本批注
    cc && cc();
  },
  addPicTag: function (d, i, cc) {  // 添加图片批注
    cc && cc(i);
  },
  editPicTag: function (d, i, cc) {  // 添加文本批注
    cc && cc(i);
  },
  beDelTag: function (uuid, cc) { // viewer内操作：删除批注
		cc && cc()
	},
  beSelectTag: function (uuid) {  // 打开批注
    console.log('打开批注', uuid);
	},
  delTags: function (uuid, cc) { // 业务端主动删除批注
		var _contentWindow = document.getElementById("pdfViewer").contentWindow;
    _contentWindow &&	_contentWindow.nd_delTags(uuid);
	},
}

    注：控制类中已包含部分批注接口，集成可直接使用，数据临时存储于浏览器缓存中，如需存储数据库，参考批注集成完整流程。

2. 控制类方法和对外方法详细说明

控制类方法详细解：

属性 类型 说明 回调参数
src String 初始化模型地址，独立入口不用赋值 ---
allTags Arrary 用于在初始化时渲染批注数据, 参考：[tag, tag, ...] ---
hidebtnCfg Arrary 用于配置功能按钮隐藏；可配置隐藏批注编辑#ico-lineTagEdit，批注删除#ico-lineTagDel按钮 ---
defaultPage Number 设置默认打开第几页 ---
init(opt) Function 初始化模型 opt：业务端可传入自定义的参数用于修改控制类属性
initLoad() Function 模型加载完成后的通知 ---

PDF Viewer对外方法详解：

属性 类型 说明 入参 返回值
nd_getTotalPage Function 获取pdf页数 -- pdf页数
nd_screenshot Function(cc) 获取截图 cc(img)：cc为回调函数，img为截图base64信息 --
nd_getAllTags Function 获取所有批注数据 -- 批注数据集合

3. 批注集成

  • pdf批注交互流程图：
  • 批注数据截图
    • 单条批注数据，示例截图：
    • 批注集合数据，示例截图：