PDF或其他文档类文件锚点控制方案

当PDF或其他文档内容过多，需要进行目录功能规划，在查看文档时标注step位置或是点击step锚点自动跳转具体章节

标注文档REF引用

1
2
3
4
5
6
7
<div id="vue-pdf-view" ref="myRef" @scroll="scrollGet($event)">
          <a-spin :spinning="spinning">
            <div id="page-view">
              <vue-pdf-embed v-if="pdfState.previewUrl != null" :source="pdfState.previewUrl" textLayer/>
            </div>
          </a-spin>
        </div>

scrollGet设置step具体位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function scrollGet(e) {
  let scrollHeight = myRef.value.scrollHeight
  let clientHeight = myRef.value.clientHeight
  let scrollTop = myRef.value.scrollTop
  let scroll = (scrollTop / scrollHeight * 100).toFixed(2)

  if (scroll >= 17.5 && scroll < 20.68) {
    current.value = 0
  } else if (scroll >= 20.68 && scroll < 23.95) {
    current.value = 1
  } else if (scroll >= 23.95 && scroll < 35) {
    current.value = 2
  } else if (scroll >= 35 && scroll < 41.07) {
    current.value = 3
  } else if (scroll >= 41.07 && scroll < 48.77) {
    current.value = 4
  } else if (scroll >= 48.77 && scroll < 54.64) {
    current.value = 5
  } else if (scroll >= 54.64 && scroll < 55.41) {
    current.value = 6
  } else if (scroll >= 55.41 && scroll < 55.99) {
    current.value = 7
  } else if (scroll >= 55.99 && scroll < 56.95) {
    current.value = 8
  } else if (scroll >= 56.95 && scroll < 60.23) {
    current.value = 9
  } else if (scroll >= 60.23 && scroll < 61.87) {
    current.value = 10
  } else if (scroll >= 61.87 && scroll < 72.51) {
    current.value = 11
  } else if (scroll >= 72.51) {
    current.value = 12
  }

}

step变更设置文档具体位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
 * step变更设置合同位置
 * @param stepNo
 */
function pdfAnchor(stepNo) {
  let scrollHeight = myRef.value.scrollHeight

  switch (stepNo) {
    case 0:
      myRef.value.scrollTop = scrollHeight * (17.5 / 100)
      break
    case 1:
      myRef.value.scrollTop = scrollHeight * (20.68 / 100)
      break
    case 2:
      myRef.value.scrollTop = scrollHeight * (23.95 / 100)
      break
    case 3:
      myRef.value.scrollTop = scrollHeight * (35 / 100)
      break
    case 4:
      myRef.value.scrollTop = scrollHeight * (41.07 / 100)
      break
    case 5:
      myRef.value.scrollTop = scrollHeight * (48.77 / 100)
      break
    case 6:
      myRef.value.scrollTop = scrollHeight * (54.64 / 100)
      break
    case 7:
      myRef.value.scrollTop = scrollHeight * (55.41 / 100)
      break
    case 8:
      myRef.value.scrollTop = scrollHeight * (55.99 / 100)
      break
    case 9:
      myRef.value.scrollTop = scrollHeight * (56.95 / 100)
      break
    case 10:
      myRef.value.scrollTop = scrollHeight * (60.23 / 100)
      break
    case 11:
      myRef.value.scrollTop = scrollHeight * (61.87 / 100)
      break
    case 12:
      myRef.value.scrollTop = scrollHeight * (72.51 / 100)
      break
  }
}