#前提：微信内置浏览器不能下载文件，一般解决方案是引导用户右上角复制去浏览器

我的方案：安卓手机直接唤起手机浏览器，进行一个跳转，直接下载pdf；苹果手机会直接预览pdf文件。（其它office文件估计都可以这样操作，大家自行测试，成功的评论下）

废话不多说 直接贴代码：

<template>
  <div>
    <h1>文件预览和下载</h1>

    <div id="fileViewer"></div>


    <div>
      <label for="fileUrl">文件链接：</label>
      <input type="text" id="fileUrl" v-model="fileUrl">
    </div>

    <!-- 直接打开浏览器下载 -->
    <button @click="openInBrowser">在浏览器中打开</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: '',
    };
  },
  methods: {
    // 检测微信浏览器
    isWechatBrowser() {
      const ua = navigator.userAgent.toLowerCase();
      return ua.indexOf('micromessenger') !== -1;
    },
    // 设置 ViewerJS 预览 office 文件
    previewOfficeFile(url) {
      const viewer = new ViewerJS.Viewer(document.getElementById('fileViewer'), {
        url: url
      });
      viewer.open();
    },
    // 点击下载按钮，设置下载链接
    openInBrowser() {
      if (this.isWechatBrowser()) {
        // 在微信内置浏览器中，直接跳转到手机自带浏览器中下载文件
        window.location.href = this.fileUrl;
      } else {
        // 不在微信内置浏览器中，直接打开下载链接
        window.open(this.fileUrl, '_blank');
      }
    }
  },
  mounted() {
    if (!this.isWechatBrowser()) {
      // 不在微信内置浏览器中，显示提示信息或其他处理
      alert('请在微信内置浏览器中使用该功能！');
    }
  }
};
</script>

<style scoped>
/* 在这里添加样式 */
</style>