Vue实现微信小程序中预览文件的缩放功能

    <div class="btn">
      <img @click.stop="zoomIn" class="icon" src="@/assets/imgs/zoom-in.png" />
      <img @click.stop="zoomOut" class="icon" src="@/assets/imgs/zoom-out.png" />
    </div>
    <div class="content" id="document-preview">
      <!-- 三类插件的代码可参考“背景介绍”中提到的那篇文章 -->
    </div>

<style lang="less" scoped>
.officePreview {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
  padding-bottom: 40px;

  #document-preview {
    width: 100%;
    transform-origin: top left;
    height: 100%;
    overflow-x: auto;
  }

  .btn {
    position: fixed;
    top: 60px;
    right: 50px;
    padding: 20px;
    z-index: 100;

    .icon {
      width: 50px;
      height: 50px;
      margin-left: 50px;
    }
  }
}
</style>

    zoomIn() {
      this.scale += 0.1;
      const previewElement = document.getElementById('document-preview');
      previewElement.style.transform = `scale(${this.scale})`;
      previewElement.style.transformOrigin = 'top left';
      this.adjustContainerWidth(previewElement);
    },
    zoomOut() {
      if (this.scale > 0.1) { // 防止缩放到过小
        this.scale -= 0.1;
        const previewElement = document.getElementById('document-preview');
        previewElement.style.transform = `scale(${this.scale})`;
        previewElement.style.transformOrigin = 'top left';
        this.adjustContainerWidth(previewElement);
      }
    },
    adjustContainerWidth(previewElement) {
      const container = document.querySelector('.officePreview');
      const previewRect = previewElement.getBoundingClientRect();
      container.style.width = `${previewRect.width}px`;
    },