快捷導(dǎo)航

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

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

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

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

實(shí)現(xiàn)思路：

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

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

二、背景介紹

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

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

三、實(shí)現(xiàn)方案

html中有下面兩個(gè)改動：

注：

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

操作按鈕進(jìn)行放大和縮小的功能代碼：

下面是所有代碼，可直接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`;
    },

這樣就完成了預(yù)覽文件的縮放功能。在小程序中打開文件進(jìn)行預(yù)覽時(shí)也可以正常操作。

四、遇到的兼容問題

問題描述：

在zoomIn()和zoomOut()方法中僅操作scale值，并將樣式更新放在computed屬性中。
動態(tài)樣式通過v-bind:style綁定到class="content"的<div>元素上。
此方法在H5環(huán)境和微信開發(fā)者工具中正常工作，但在實(shí)際手機(jī)端打開微信小程序使用時(shí)，縮放功能卻無法生效。

可能原因：

微信小程序的渲染機(jī)制與H5有所不同，特別是在處理動態(tài)樣式更新時(shí)可能存在延遲或不一致的問題。
computed屬性雖然能夠?qū)崟r(shí)計(jì)算并返回最新的樣式對象，但在某些情況下，Vue的響應(yīng)式系統(tǒng)可能未能及時(shí)觸發(fā)樣式更新，尤其是在移動設(shè)備上。

解決方案：

使用watch監(jiān)聽scale的變化，并在watch回調(diào)中直接更新style屬性，確保每次scale變化時(shí)都能立即應(yīng)用新的樣式。
同時(shí)，確保scale值的變化是漸進(jìn)的，避免一次性設(shè)置過大的scale值導(dǎo)致渲染問題。