PDFViewer 组件

基于 pdf.js viewer 的 PDF 在线预览组件，支持批注、盖章、校审等功能。

批注类型

签章模式：

图章 Stamp 签名 Caret

文字批注模式：

矩形 Square 圆形 Circle 文字 FreeText 高亮 Highlight 删除线 StrikeOut 下划线 Underline

注意：高亮、删除线、下划线需要选中文字后才可使用，工具栏的"选择"按钮处于未选中状态，才能选中文字。

使用方式

调用组件的 init(data) 方法初始化 PDF 预览。

初始化参数

基础参数

以下参数由组件自动处理，无特殊清空无需手动传入：

参数名	说明	值来源
ae_get_url	批注数据加载地址	"ANNOTATION" || "API"
ae_post_url	批注数据提交地址	"ANNOTATION" || "API"
ae_api_url	API 基础地址	环境变量/全局配置
ae_userid	批注人 ID	当前登录用户 ID
ae_username	批注人姓名	当前登录用户姓名

必填参数

参数名	类型	说明
file	Object	PDF 文件对象，包含 fileExtension、fileFolder 等
mode	String	批注模式：sign-签章模式，text-文字批注模式

签章模式 (mode: "sign") 参数

参数名	类型	必填	说明	默认值/枚举值
modelId	String	否	图章管理列表 ID	597719438376049029
projectRole	String	否	项目角色枚举	ProjectRole
sealType	String	否	出图章类型枚举	PlotSealType

文字批注模式 (mode: "text") 参数

参数名	类型	必填	说明	默认值/枚举值
fileId	String	是	文件 ID	-
stepCode	String	否	当前环节编号	-
editable	Boolean	否	是否可编辑批注	false
replyable	Boolean	否	是否可回复批注	false
mistakeLevel	String	否	问题等级枚举	MistakeLevel
defaultLevel	String	否	默认问题等级	CommentType2
auditState	String	否	提出意见的校审环节枚举	AuditSuggestionState
dataSource	String	否	批注数据来源	默认为"ANNOTATION"，从 localStorage 获取批注数据; "API", 调接口获取批注数据

使用示例

// 签章模式
this.$refs.pdfViewer.init({
  file: fileObject,
  mode: "sign",
});

// 文字批注模式
this.$refs.pdfViewer.init({
  file: fileObject,
  mode: "text",
  fileId: "123456",
  stepCode: "STEP001",
  dataSource: "API",
  editable: true,
  replyable: true,
});

组件事件

• closeDialog: 关闭对话框时触发，调用父组件的 handleSave() 方法

批注数据存储

组件销毁时自动将批注数据从 localStorage 转存至 Vuex store (base/setCCData)。