微信公众号内下载pdf等文件,受微信所限制,安卓和IOS不同处理方式

这篇具有很好参考价值的文章主要介绍了微信公众号内下载pdf等文件,受微信所限制,安卓和IOS不同处理方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:

IOS手机可以直接下载文件,但是需要后端设置Content-Disposition和Content-Type

安卓手机只能打开其他浏览器下载,(别问我怎么知道的,试出来的结果),所以跳转至中专页,让在默认浏览器打开

最新最优方法可以点击阅读,本篇文章可以直接略过

所需要的方法:

1:是否时微信浏览器环境

export const isWeChat = () => {
  var ua = window.navigator.userAgent.toLowerCase();
  // ua.indexOf('micromessenger')为真-微信端,如果为假,就是其他浏览器
  if (ua.indexOf("micromessenger") > -1) {
    return true; // 是微信端
  } else {
    return false;
  }
};

2: 判断时安卓还是IOS

export const appSource = () => {
  const u = navigator.userAgent;
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isiOS) {
    return "ios";
  } else {
    return "andriod";
  }
};

3:form表单方式下载文件

export const downloadform = url => {
  var form = document.createElement("form");
  form.action = url;
  form.method = "get";
  form.style.display = "none";
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
};

使用方式

import { appSource, downloadform } from "@/utils/util";
downloadClick() {
	if (appSource() === "ios") {
	  downloadform(`${location.origin}/preHostilePdf/2022-02-21/36212419741128205X-1645420312158.pdf`);
	} else {
	  // 安卓去中转页
	  this.$router.push({
	    path: "/pdfView",
	    query: {
	      toLink: encodeURIComponent("/preHostilePdf/2022-02-21/36212419741128205X-1645420312158.pdf")
	    }
	  });
	}
},

/pdfView 页面源码 (只针对安卓用户)

PopUp组件是引导层,引导用户点击右上角打开其他默认浏览器,代码就不贴这里了,每个公司都有每个公司的风格。
_loadFile是使用pdf.js 预览pdf文件的,会在下个文章写,当然如果页面是空白也可以,或者是一段友好的提醒文字也可以。

<template>
  <div class="canvas-container">
    <div class="canvas" :class="scaleCount > 0 ? 'scroolBox' : ''" id="canvas">
      <canvas v-for="page in pages" class="canvasDiv" :id="'the-canvas' + page" :key="page" ref="pdf"></canvas>
    </div>
    <div class="flexBox">
      <img @click="scaleD" class="big" src="@/assets/icon/bigIcon.png" alt="" />
      <br />
      <img v-show="scaleCount === 0" class="small" src="@/assets/icon/smallDisableIcon.png" alt="" />
      <img v-show="scaleCount > 0" @click="scaleX" class="small" src="@/assets/icon/smallIcon.png" alt="" />
    </div>
    <div class="bottom_box">
      <button @click="submit_btn()">
        下载
      </button>
    </div>
    <Pop-up ref="mPopUp">
      <div slot="popupContent">
        <div class="steerTop">
          <div class="steerArrowBox">
            <img class="steerArrow" src="@/assets/images/arrow.png" />
          </div>
          <div class="steerWordingBox">
            <img class="steerWording" src="@/assets/images/steerWording.png" />
          </div>
        </div>
        <img class="steerImg" src="@/assets/images/steer.png" />
      </div>
    </Pop-up>
  </div>
</template>
<script>
import { _loadFile } from "@/utils/common";
import { isWeChat, downloadform } from "@/utils/util";
import PopUp from "components/component/PopUp";
export default {
  components: {
    PopUp
  },
  data() {
    return {
      pages: [],
      scaleCount: 0,
      scale: 1.1,
      imageUrl: "",
      toLink: ""
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.toLink = decodeURIComponent(this.$route.query.toLink);
      _loadFile.call(this, location.origin + this.toLink);
      this.submit_btn();
    },
    scaleD() {
      this.scaleCount++;
      this.$refs.pdf.forEach(item => {
        let widthTemp = item.style.width.split("px")[0];
        let heightTemp = item.style.height.split("px")[0];
        item.style.width = parseInt(widthTemp) * parseFloat(this.scale) + "px";
        item.style.height = parseInt(heightTemp) * parseFloat(this.scale) + "px";
      });
    },
    scaleX() {
      if (this.scaleCount == 0) {
        return;
      }
      this.$refs.pdf.forEach(item => {
        let widthTemp = item.style.width.split("px")[0];
        let heightTemp = item.style.height.split("px")[0];
        item.style.width = parseInt(widthTemp) / parseFloat(this.scale) + "px";
        item.style.height = parseInt(heightTemp) / parseFloat(this.scale) + "px";
      });
      this.scaleCount--;
    },
    submit_btn() {
      if (isWeChat()) {
        // 内部浏览器弹出引导
        this.$refs.mPopUp.popupBgShow = true;
      } else {
        // 外部浏览器直接下载
        downloadform(this.imageUrl + this.toLink);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.canvas-container {
  margin: 0 auto;
  iframe {
    width: 100%;
    height: calc(100vh - 4rem);
  }
  .canvas {
    width: 100%;
    height: calc(100vh - 2.8rem);
    overflow-x: hidden;
    overflow-y: auto;
    .canvasDiv {
      border-bottom: 1px solid #ccc;
    }
  }
  .scroolBox {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  .flexBox {
    position: fixed;
    right: 0.2rem;
    top: 1.4rem;
    padding: 0.1rem;
    background-color: rgba(244, 244, 244, 0.6);
    border-radius: 0.4rem;
    overflow: hidden;
    .big {
      width: 0.58rem;
    }
    .small {
      width: 0.58rem;
    }
  }
  .bottom_box {
    padding: 0 0.48rem 0 0.48rem;
    height: 1.6rem;
    .note {
      font-size: 0.3rem;
      color: #999;
      word-wrap: break-word;
    }
    .btn-disable {
      opacity: 0.3;
    }
  }
  .steerTop {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    .steerArrowBox {
      margin-top: 2vw;
      padding: 2vw;
      text-align: right;
      .steerArrow {
        width: 20%;
        transform: rotateZ(342deg);
        animation: beat 1s linear infinite;
      }
    }
    @keyframes beat {
      0% {
        margin-top: 2vw;
      }
      50% {
        margin-top: 4vw;
      }
      100% {
        margin-top: 2vw;
      }
    }
    .steerWordingBox {
      padding: 2vw;
      text-align: center;
      .steerWording {
        width: 50%;
      }
    }
  }
  .steerImg {
    width: 100%;
  }
}
</style>

安卓用户,手动点击右上角打开其他浏览器。用户都是懒蛋,如果想让懒蛋们体验更好一点,也可以,用下边的方式,需要使用到blob链接,我在这里把后端传的base64转为 blob链接,使用方式:

export const savePicture = (base64, fileName = "下载文件(测试).pdf") => {
  var arr = base64.split(",");
  var bytes = atob(arr[1]);
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  var blob = new Blob([ab], { type: "application/octet-stream" });
  var url = URL.createObjectURL(blob);
  const el = document.createElement("a");
  el.style.display = "none";
  el.setAttribute("target", "_blank");
  fileName && el.setAttribute("download", fileName);
  el.href = url;
  document.body.appendChild(el);
  el.click();
  document.body.removeChild(el);
};

下载方式:(此时点击按钮会主动弹出在浏览器打开弹窗,无需用户点击右上角,此方法必须要blob链接,此方法必须要blob链接,此方法必须要blob链接):

import { savePicture } from "@/utils/util";

download() {
if (appSource() !== "ios")
     savePicture("data:application/pdf;base64," + res.base64);
},

最优版本已经更新,下方点击进入

https://blog.csdn.net/qq_43586648/article/details/126894378?spm=1001.2014.3001.5501文章来源地址https://www.toymoban.com/news/detail-430617.html

到了这里,关于微信公众号内下载pdf等文件,受微信所限制,安卓和IOS不同处理方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信公众号模板消息源码实现,打破服务号群发推送次数限制

    公众号服务号每个月只能群发推送四次文章,我们可以使用模板消息为公众号粉丝推送信息 下面是使用golang实现的模板消息发送类库封装,轻松实现模板消息发送 wechat.go 我们的使用方式 推送的效果如图所示,点击模板就能跳转到我们自定义的url上 我在自己客服系统中也是

    2024年02月15日
    浏览(46)
  • uniapp实现h5、app、微信小程序三端pdf文件下载和预览

    以下代码兼容三端,app,h5,微信小程序,经过个人测试 手机端有两种方法,使用renderjs或者uniapp的api 两者的区别 使用renderjs的写法,会提示用户是否下载文件,下载完成后用户需要手动点击下载的文件,才会打开文件 使用uniapp的api则可以直接下载并直接预览,不需要用户操

    2024年02月11日
    浏览(54)
  • 【pdf技巧】PDF文件设置打印限制

    想要限制PDF文件的打印功能,想要限制PDF文件打印清晰度,都可以通过设置限制编辑来达到目的。 打开PDF编辑器,找到设置限制编辑的界面,切换到加密状态,然后我们就看到 有印刷许可。勾选【权限密码】输入一个PDF密码,在印刷许可中选择禁止打印或者设置分辨率就可

    2024年01月19日
    浏览(55)
  • 微信小程序或公众号音频下载保存

    需求背景 一些微信公众号的文章或小程序里会嵌入一些音频,有时我们需要把这些音频保存到手机或电脑里,在音频失效后或没有微信环境时也能随时听。下面就个人经验总结一下: 环境 手机微信版本:8.0.35 开干 打开要下载的音频开始播放。 打开手机上的文件管理器,依

    2024年02月16日
    浏览(49)
  • 微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片

    微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: 但是在微信浏览器,上面那段代码是无效的,这是微信浏览器的限制。 微信的JS-SDK提供 wx.downloadImage() 的方法,是用来下载图片的。但其实我觉得应该是用来耍猴的。该方法不接受一个 url 参数,而是接受

    2024年02月11日
    浏览(62)
  • uniapp - 微信小程序平台实现预览 office 文件及保存下载到本地功能,将word/excel/ppt/pdf等文件在小程序内进行预览,用户可以保存和转发给好友进行下载到手机(一键复制运行)

    在uniapp微信小程序开发中,预览文件、下载文件并保存到手机本地功能(支持office全套word/pdf/ppt/excel等),兼容安卓和苹果端非常好用, 本文有2种方案,愿意用哪个就用哪个,都有示例代码和详细说明。

    2024年02月08日
    浏览(232)
  • 微信公众号如何上传文件

    微信公众号没有提供文件上传下载功能,我们可以在文章中添加小程序的方式实现这一功能。用户点击文件链接可以直接下载文件,不需要跳转到外部浏览器操作,简单易用。在文章中添加小程序是每一个公众号都拥有的能力,不需要关联小程序,服务号和订阅号都支持。

    2024年02月12日
    浏览(138)
  • 帝国cms在微信公众号里面获取不到下载认证码的解决方法

    现在很多网站为了获取用户都开始这样使用扫码关注微信公众号才能获取下载码 比如我们下载这个模板, 微信里回复了,不回复验证码的原因,是因为我们网站前段时间把php版本升级了7.3 检查了下 微信接口代码 因为php7.0版本很多都设置了register_globals禁止,不能用$G

    2024年02月03日
    浏览(52)
  • 视频号挂公众号链接突破绑定公众号限制,突破10000阅读量限制,随便加

    想必玩视频号绑定公众号链接的应该清楚了,8月初,视频号再次对公众号做出了限制,以前是直接放在视频上 方,后来又把链接放在评论区顶部,在评论区顶部活的时间还挺长,持续了估计有一年左右,接着视频号再次放出 大招,直接做出限制,要求视频号必须绑定公众号

    2024年02月10日
    浏览(40)
  • vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件

    效果如图 直接看代码吧 template部分 css部分 js部分

    2024年02月11日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包