微信公众号下载文件在浏览器打开

最新推荐文章于 2023-09-07 12:07:12 发布

Ming-code

最新推荐文章于 2023-09-07 12:07:12 发布

阅读量2.7k

点赞数 2

分类专栏：微信页面微信公众号

本文链接：https://blog.csdn.net/xiaoming7776/article/details/107516183

版权

微信公众号同时被 2 个专栏收录

5 篇文章 2 订阅

订阅专栏

微信页面

4 篇文章 0 订阅

订阅专栏

a.html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在浏览器打开</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 优先使用 IE 最新版本和 Chrome -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        .fxTis img{
            width: 100%;
            display: inline-block;
        }
        .fxTis{
            text-align: center;
        }
        .fxTis button{
            border: 0;
            padding: 6px 14px;
            background-color: #ffffff;
            font-size: 18px;
            border-radius: 4px;
        }
    </style>
</head>
<body style="background-color: #333333;">
<div class="fxTis">
    <button type="button" onclick="onDocDownload('http://cms.heromutual.com/u/cms/huiyou/201909/09144922jmgw.pdf')">文件</button>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    function onDocDownload(filepath) {
        window.top.location.href="browser.html?fileurl="+filepath;
    }
</script>
</html>

在这里插入图片描述

分享.html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在浏览器打开</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 优先使用 IE 最新版本和 Chrome -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        .fxTis img{
            width: 100%;
            display: inline-block;
        }
        .fxTis{
            text-align: center;
        }
        .fxTis button{
            border: 0;
            padding: 6px 14px;
            background-color: #ffffff;
            font-size: 18px;
            border-radius: 4px;
        }
    </style>
</head>
<body style="background-color: #333333;">
    <div class="fxTis">
        <img src="images/fx.jpg">
        <button type="button">在浏览器中打开</button>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    //从浏览器url地址中获取参数对应的值
    function GetRequest() {
        var url = location.search;//获取url中"?"符后的字符串
        var theRequest = new Object();
        if (url.indexOf("?")!=-1){  //存在？ 则
            var str = url.substr(1);
            strs = str.split("&");  //字符串分割
            for(var i=0;i<strs.length;i++){
                theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    //判断是否是微信浏览器
    function is_weixin() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            console.log('微信浏览器');
            return true;
        } else {
            console.log("不是微信浏览器");
            return false;
        }
    }

    var is_weixin=is_weixin();
    if(is_weixin){
        //是微信浏览器  显示返回按钮   （用户可以选择下载或者返回）
        $('#back_btn').show();
    }else{
        //不是微信浏览器
        //执行下载
        window.location.href=GetRequest().fileurl;
    }
</script>
</html>

在这里插入图片描述

用浏览器打开就能直接下载文件了

Ming-code

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
微信公众号下载文件在浏览器打开

a.html 页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>在浏览器打开</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1
复制链接

扫一扫