微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件,可预览和下载 office 文件(doc / xls / ppt / pdf 等)适用于任何前端技术栈网站,兼容安卓和苹果系统!

news2024/11/17 23:43:54

前言

网上的教程都是让你写页面 “引导” 右上角三个点里,让用户自己去浏览器打开,其实这样用户体验并不好。

本文实现了 最新微信公众号 H5 网页(微信内置浏览器中),预览下载 office 文件,安卓和苹果全都支持!

您可以直接复制代码,移植到自己项目中去,任何前端项目(比如 vue,uniapp,nuxt,react 等等)都保证可用。


如下图真机所示,分别在安卓和苹果系统中实现 “文件下载”,也是目前最主流的黑科技解决方案,

安卓系统下,当用户点击下载按钮后自动弹出 “微信原生” 去浏览器下载,而苹果系统则是预览,然后发送到电脑上。

无任何第三方插件,示例代码干净整洁

在这里插入图片描述 在这里插入图片描述

示例代码

注意:一定要在微信内置浏览器打开(可以将项目跑出来的 IP 地址,发送到微信好友)在一个局域网内就可以访问了。

拿大家熟悉的 Vue.js 语法为示例,您可以一键复制代码,然后运行起来

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409682.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

全网超详细的【Axure】Axure RP 9的下载、安装、中文字体、授权

文章目录1. 文章引言2. 下载Axure93. 安装Axure94. Axure9中文5. Axure9授权1. 文章引言 最近在学习原型图,针对画原型图的工具,反复对比墨刀、Axure、xiaopiu后,最终选择了Axure。 接下来,我便从Axure RP 9的下载、安装、中文字…

VUE实现微信扫码登录

获取access_token时序图&#xff1a; public中index.html引入 <script src"https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> 微信登录操作 new WxLogin({// 以下操作把请求到的二维码嵌入到id为"weixin"的标签中i…

走进Vue【三】vue-router详解

目录&#x1f31f;前言&#x1f31f;路由&#x1f31f;什么是前端路由&#xff1f;&#x1f31f;前端路由优点缺点&#x1f31f;vue-router&#x1f31f;安装&#x1f31f;路由初体验1.路由组件router-linkrouter-view2.步骤1. 定义路由组件2. 定义路由3. 创建 router 实例4. 挂…

VUE3 子传父 父传子 双向传递

组件参数传递 父传子 father.vue <template > <!-- 父传子实现 2.向vue页面中的子组件传递该属性 :传给子组件的名字&#xff08;自定义&#xff09;“对应定义在父组件的属性名” --><Header :openpagevaria"openpagevaria" ></Header&g…

使用vue-cli-plugin-electron-builder创建electron+vue项目

文章目录一、nvm环境二、安装vue-cli、yarn三、使用vue项目管理器创建项目四、使用vue项目管理器安装插件五、进入my-electron-vue目录&#xff0c;启动electron六、安装VueDevtools&#xff0c;解决Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT——…

npm install xxxx --legacy-peer-deps命令是什么?

本文分享自华为云社区《npm install xxxx --legacy-peer-deps命令是什么&#xff1f;为什么可以解决下载时候产生的依赖冲突呢&#xff1f;》&#xff0c;作者&#xff1a; gentle_zhou 。 在日常使用命令npm install / npm install XX下载依赖的操作中&#xff0c;我经常会遇…

npm 报错“A complete log of this run can be found in:”解决方法

npm 启动项目 npm run serve/dev的时候报了个错&#xff1a;再次记录一下 ! code ELIFECYCLE npm ERR! errno 1 npm ERR! new0.1.0 serve: vue-cli-service serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the new0.1.0 serve script. npm ERR! This is probably n…

【CSS 文字渐变、背景渐变实现方式】

CSS 文字渐变&#xff0c;背景渐变的几种实现方式 在我们日常页面开发当中&#xff0c;使用合适的css渐变效果能让我们的界面更加美观&#xff0c;赏心悦目。 一、CSS 文字渐变&#xff1a; 首先&#xff0c;文字渐变实际上是通过背景渐变裁剪成文字的前景色&#xff0c;然后…

【微信小程序】初入微信小程序

大家好我依旧是山鱼&#x1f41f;&#xff0c;对于初入小程序的同学来说本篇依旧是你的不二选择&#xff0c;它详细的介绍了小程序及小程序&开发者工具的使用&#xff0c;大家快快学起来吧&#xff01; 目录 一&#xff0c;小程序简介 1.1 什么是微信小程序 1.2小程序与…

前端实现一个名言生成器

The sand accumulates to form a pagoda✨ 写在前面✨ JS是什么&#xff1f;✨ 名言生成器✨ 页面搭建✨ 功能实现✨ 写在前面 在上周我们通过HTML、CSS实现了一个简单的‘我的相册‘页面的搭建&#xff0c;很多伙伴呢跟我说难道前端就只能做一些页面搭建的工作吗&#xff1f;…

Vue3 京东到家项目实战第一篇(首页及登录功能开发) 进阶式掌握vue3完整知识体系

目录 项目首页开发 项目准备✌️ 样式开发&#x1f44d; 防抖&#x1f44a; 底部横条✌️ 登陆注册功能开发 样式编写 &#x1f450; 路由守卫实现基础登录校验功能☝️ 使用 axios 发送登录 Mock 请求&#x1f448; 请求函数的封装&#x1f64c; 通过代码拆分增加逻…

html基本标签

目录 1&#xff0c;标题标签h1-h6 2&#xff0c;段落标签p 3&#xff0c;换行标签br 4&#xff0c;水平线标签hr 5&#xff0c;图片标签img及路径详解(绝对/相对路径) 6&#xff0c;超文本链接标签a 7&#xff0c;超本文链接之锚点 8&#xff0c;div标签 9&#xff0c…

JS-获取网页滑动距离,并实时监听

介绍 本文主要介绍通过JS获取网页滑动距离&#xff0c;并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。 一、获取网页滑动距离 JS方法&#xff1a; console.log(网页被卷去的高&#xff1a;, doc…

05-ES6语法:解构赋值

本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式&#xff0c;通过解构赋值&#xff0c;可以将属性/值从对象/数组中取出&#xff0c;赋值给其他变量。 下面我们具体来看看解构赋值是什么&#xff1f;以及是如何使用的&#xff1f; …

Bootstrap——制作个人简历网页、工具类【边框(添加、删除、颜色、圆角)、清除浮动、颜色(文本、链接、背景)、display属性、浮动、定位、文本对齐】

制作个人简历网页 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><meta name"viewport"content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,u…

移动端H5网页开发必备知识

简介 工欲善其事必先利其器&#xff0c;今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的 移动端H5网页开发常见问题汇总 移动端开发必备知识-Hybrid App 像素 像素即一个…

在Vue中获取DOM元素的实际宽高

最近使用 D3.js 开发可视化图表&#xff0c;因为移动端做了 rem 适配&#xff0c;所以需要动态计算获取图表容器的宽高&#xff0c;其中涉及到一些原生DOM API的使用&#xff0c;避免遗忘这里总结一下。 一、获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。 为了…

【Vue】Vue 项目前端响应式布局及框架搭建

文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景图2、设置标题文字3、页面主体部分&#xff08;1&#xff09…

Request请求转发getRequestDispatcher

文章目录一、getRequestDispatcher理解二、RequestDispatcher.forward()方法与HttpServletResponse.sendRedirect()方法的区别三、实现步骤1.编写index.jsp登录页面2.编写跳转页面success.jsp页面3.编写LoginServlet.java类四、运行示例一、getRequestDispatcher理解 request.g…

Vue项目使用百度地图api

目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证 进入百度地图开放平台 官网&#xff0c;&#xff08;认证需要身份证号码&#xff0c;人脸识别&#xff0c;手机百度APP&#xff0c;邮箱地址&#xff09; 注册登录完成&#xff0c;…