微信内置浏览器如何实现pdf的下载,解决方案

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

我的方案:安卓手机直接唤起手机浏览器,进行一个跳转,直接下载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>

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兔八哥的幸福生活

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值