ComPDF
联系销售
PDF SDK转换 SDKIDP
PDF SDK
Demo技术支持

创建注释 ​

ComPDFKit for Web 支持各种标准注释，每一个都以类似的方式添加到项目中。在创建注释之前，你需要在你的项目中初始化一个 PDF 文档。

注: 当添加注释时，页面空间是一个以当前页面左上角为原点的坐标系统来定位注释在页面的位置。

javascript
// 导入 ComPDFKit Web Demo 的JS文件。
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
  .then((core) => {
    const docViewer = core.docViewer;
    docViewer.addEvent('documentloaded', () => {
      console.log('ComPDFKit Web Demo loaded');
    })
  });

Text（便签） ​

使用以下方法将便签注释（文本便签注释）添加到 PDF 文档页面。

javascript
docViewer.addAnnotations({
  type: 'text',
  pageIndex: 0,
  color: '#FF0000',
  fontSize: 16,
  fontName: 'Helvetica',
  opacity: 1,
  contents: 'test',
  rect: {
    left: 100,
    top: 30,
    right: 124,
    bottom: 54
  }
});

使用以下方法将超链接或页面链接添加到 PDF 文档中。

javascript
// 添加超链接。
docViewer.addAnnotations({
  type: 'link',
  pageIndex: 0,
  rect: {
    left: 92,
    top: 200,
    right: 167,
    bottom: 230
  },
  url: 'https://example.com'
});

// 添加页面链接。
docViewer.addAnnotations({
  type: 'link',
  pageIndex: 0,
  rect: {
    left: 92,
    top: 200,
    right: 167,
    bottom: 230
  },
  destPage: 2
});

Free Text（文本） ​

使用以下方法将文本注释添加到 PDF 文档页面。

javascript
docViewer.addAnnotations({
  type: 'freetext',
  pageIndex: 0,
  color: '#000000',
  fontSize: 16,
  fontName: 'Helvetica',
  opacity: 1,
  textAlignment: 'left',
  contents: 'test',
  rect: {
    left: 100,
    top: 200,
    right: 160,
    bottom: 240
  }
});

Graphics (图形) ​

使用以下方法将图形注释，如矩形，圆形，线条和箭头等添加到 PDF 文档页面。

javascript
// 矩形。
docViewer.addAnnotations({
  type: 'square',
  pageIndex: 0,
  rect: {
    left: 50,
    top: 50,
    right: 100,
    bottom: 100
  },
  borderWidth: 2,
  opacity: 1,
  fillTransparency: 1,
  fillColor: '',
  color: '#FF0000',
  borderColor: '#FF0000',
  borderStyle: 'solid',
  dashes: []
});

// 圆形。
docViewer.addAnnotations({
  type: 'circle',
  pageIndex: 0,
  rect: {
    left: 50,
    top: 50,
    right: 100,
    bottom: 100
  },
  borderWidth: 2,
  opacity: 1,
  fillTransparency: 1,
  fillColor: '',
  color: '#FF0000',
  borderColor: '#FF0000',
  borderStyle: 'solid',
  dashes: []
});

// 线条。
docViewer.addAnnotations({
  type: 'line',
  pageIndex: 0,
  linePoints: [50, 50, 100, 100],
  rect: {
    left: 50,
    top: 50,
    right: 100,
    bottom: 100
  },
  borderWidth: 2,
  opacity: 1,
  color: '#FF0000',
  borderColor: '#FF0000',
  borderStyle: 'solid',
  dashes: [],
});

// 多边形。
docViewer.addAnnotations({
  type: 'polygon',
  pageIndex: 0,
  rect: {
    left: 114,
    top: 302,
    right: 310,
    bottom: 447
  },
  vertices: [
    { x: 156, y: 328 },
    { x: 230, y: 302 },
    { x: 300, y: 362 },
    { x: 310, y: 436 },
    { x: 180, y: 447 },
    { x: 114, y: 395 }
  ],
  borderWidth: 2,
  opacity: 1,
  fillTransparency: 1,
  fillColor: '',
  color: '#FF0000',
  borderColor: '#FF0000',
  borderStyle: 'solid',
  dashes: [],
});

// 折线。
docViewer.addAnnotations({
  type: 'polyline',
  pageIndex: 0,
  rect: {
    left: 130,
    top: 120,
    right: 263,
    bottom: 232
  },
  vertices: [
    { x: 130, y: 156 },
    { x: 202, y: 120 },
    { x: 263, y: 223 },
    { x: 157, y: 232 }
  ],
  borderWidth: 2,
  opacity: 1,
  color: '#FF0000',
  borderColor: '#FF0000',
  borderStyle: 'solid',
  dashes: [],
});

// 圆弧。
docViewer.addAnnotations({
  type: 'ink',
  pageIndex: 0,
  arcPoints: [
    { x: 92, y: 225 },
    { x: 233, y: 169 },
    { x: 143, y: 98 }
  ],
  inkPointes: [
    [
      { PointX: 92, PointY: 225 },
      { PointX: 233, PointY: 169 },
      { PointX: 143, PointY: 98 }
    ]
  ],
  borderWidth: 2,
  opacity: 1,
  color: '#FF0000',
  borderColor: '#FF0000',
});

Markup (标记) ​

使用以下方法将高亮注释添加到 PDF 文档页面。其他标记类注释的添加方法类似下列代码所示方式。

注: quadPoints的值为(left,top), (right,top), (left,bottom), 或 (right,bottom). 当前页面左上角为坐标原点。

javascript
docViewer.addAnnotations({
  type: 'highlight',  // 标记注释的注释类型包括：highlight, underline, strikeout, squiggly。
  pageIndex: 0,
  opacity: 0.8,
  quadPoints: [
    { PointX: 116, PointY: 300 },
    { PointX: 360, PointY: 300 },
    { PointX: 116, PointY: 360 },
    { PointX: 360, PointY: 360 },
  ],
  rect: {
    left: 116,
    top: 300,
    right: 360,
    bottom: 360
  },
  color: '#FF0000',
  contents: 'test',
});

Ink (手绘) ​

手绘是用各种颜色的笔在 PDF 文档上进行自由标记的注释类型。按照以下方法添加手绘注释到 PDF 文档页面。

javascript
docViewer.addAnnotations({
  type: 'ink',
  pageIndex: 0,
  borderWidth: 2,
  opacity: 0.8,
  borderColor: '#FF0000',
  inkPointes: [[
    { PointX: 9.20, PointY: 34 },
    { PointX: 9.20, PointY: 34 },
    { PointX: 9.20, PointY: 33 },
    { PointX: 9.20, PointY: 31 },
    { PointX: 10.20, PointY: 31 },
    { PointX: 11.20, PointY: 30 },
    { PointX: 12.20, PointY: 28 },
    { PointX: 13.2, PointY: 27 },
    { PointX: 13.2, PointY: 26 },
    { PointX: 15.2, PointY: 24 },
    { PointX: 17.2, PointY: 23 },
    { PointX: 22.2, PointY: 19 }
  ]],
  rect: {
    left: 9.2,
    top: 19,
    right: 22.2,
    bottom: 34
  }
});

Stamp (图章) ​

使用以下方法向 PDF 文档页面添加标准和文本图章。

javascript
// 标准图章。
docViewer.addAnnotations({
  type: 'stamp',
  pageIndex: 0,
  rect: {
    left: 205,
    top: 379,
    right: 435,
    bottom: 431
  },
  stampType: 'standard',
  contents: 'NotApproved'
});

// 文本图章。
docViewer.addAnnotations({
  type: 'stamp',
  pageIndex: 0,
  rect: {
    left: 220,
    top: 367,
    right: 320,
    bottom: 412
  },
  stampType: 'text',
  contents: 'REVISED',
  time: '28/07/2023 07:28:28',
  stampColor: 1,
  stampShape: 0
});

// 图片图章
const res = await fetch('https://example.com/image.png');
const imageBlob = await res.blob();
const reader = new FileReader();

reader.onloadend = async () => {
  const imageBase64 = reader.result;

  docViewer.addAnnotations({
    type: 'stamp',
    stampType: 'image',
    pageIndex: 0,
    imageBase64,
    rect: {
      left: 220,
      top: 367,
      right: 320,
      bottom: 412
    }
  });
};

reader.readAsDataURL(imageBlob);