pdf可以做个分页功能吗，类似于iframe预览url接#page=1

[YangyangU]

在预览组件渲染完毕，给每个canvas添加自定义属性，并拿到总页数，在父组件中根据页码进行滚动

子组件

function renderedHandler() {
  setPreLoading(false);
  nextTick(() => {
    setScrollToCenter();

    //给canvas添加属性
    const canvasElements = document.querySelectorAll('.vue-office-pdf-wrapper canvas');
    canvasElements.forEach((canvas, index) => {
      canvas.setAttribute('data-page', (index + 1).toString());
    });
    const total = canvasElements.length;
    setTotal(total);
  });
}

父组件

// 预览分页滚动
const scrollToCanvas = (pageNumber: number) => {
  const filePreviewContent = filePreviewRef.value;
  const canvasElement = filePreviewContent.querySelector(
    `.vue-office-pdf-wrapper [data-page="${pageNumber}"]`
  );

  if (canvasElement) {
    const { top } = canvasElement.getBoundingClientRect();
    const { top: parentTop } = filePreviewContent.getBoundingClientRect();
    const scrollPosition = top - parentTop + filePreviewContent.scrollTop;
    filePreviewContent.scrollTo({ top: scrollPosition, behavior: 'smooth' });
  }
};