Vue實現(xiàn)微信小程序中預覽文件的縮放功能

更新時間：2024年12月05日 08:44:49 作者：小蹦跶兒

在微信小程序中,默認情況下,文件預覽功能不支持文檔縮放,導致用戶在遇到小字體時難以清晰閱讀,為了解決這一問題并提升用戶體驗,實現(xiàn)文檔的縮放功能至關重要,所以本文

一、實現(xiàn)的效果

實現(xiàn)思路：

在文檔預覽界面的右上角新增了兩個縮放按鈕，用戶可以通過簡單的點擊輕松實現(xiàn)放大和縮小，極大地提升了閱讀的便捷性和舒適度。這一設計不僅簡化了操作流程，還確保了用戶能夠根據(jù)個人需求自由調整查看比例，享受更佳的閱讀體驗。

上圖是原始比例，看起來確實不太清晰友好，下面是放大后的效果，可以進行上下左右拖動：

二、背景介紹

微信小程序中的文件預覽功能是通過內嵌的H5頁面（基于Vue項目并使用相關插件）實現(xiàn)的。因此，本次新增的縮放功能是在H5頁面中完成的，無需對小程序本身的代碼進行任何修改。這一做法簡化了開發(fā)流程，確保了功能的快速迭代和部署。

最后會分享一下此功能遇到的兼容性問題。

三、實現(xiàn)方案

html中有下面兩個改動：

注：

（1）按鈕的布局

（2）將插件外面包一層<div>

下面是所有代碼，可直接copy:

    <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>

將按鈕放在右上角固定展示，這是所有的樣式：

下面是所有代碼，可直接copy：

<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>

操作按鈕進行放大和縮小的功能代碼：

下面是所有代碼，可直接copy：

    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`;
    },