uni-app 微信小程序 支付宝小程序(alipay) 百度小程序(baidu),预览pdf(链接和base64) 及下载(仅微信),window.open uni.downloadFile

这篇具有很好参考价值的文章主要介绍了uni-app 微信小程序 支付宝小程序(alipay) 百度小程序(baidu),预览pdf(链接和base64) 及下载(仅微信),window.open uni.downloadFile。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

废话不多说直接上代码吧

之前搜了一大堆有的没的,最终还是小伙伴巴拉文档一起找到的方案(离不开小伙伴的帮助,自己总容易陷入死局,在此鸣谢 疾风李青!);

想起个事:一定要给这些路径的域名配到相应的开发管理上,其他平台不过多赘述了
支付宝小程序下载pdf,小程序,微信小程序,微信

首先是预览,由于我这里是uni-app框架开发三端,所以展示内容开头以uni为主:
如果你的dpf是链接形式 形如:https:// ,那么下面方案适合你(该方案,是小程序中的window.open的实现。)

支付宝不同机型 调用uni.downloadFile 发现会发现有多种形式的文件路径,因此条件编译一下(纯他么坑爹)

const times = new Date().getTime();
let userPath = '';
// #ifdef MP-ALIPAY
userPath = my.env.USER_DATA_PATH;
// #endif
// #ifdef MP-WEIXIN
userPath = wx.env.USER_DATA_PATH;
// #endif
// #ifdef MP-BAIDU
userPath = swan.env.USER_DATA_PATH;
// #endif

let filePath = userPath + '/' + times + '.pdf';

export default (url) => {
  uni.downloadFile({ // 下载
    url, // 服务器上的pdf地址
    filePath,
    success: (res) => {
      let openDocumentPath = filePath;
      // #ifdef MP-ALIPAY
      openDocumentPath = res.tempFilePath || res.filePath || filePath;
      // #endif
      uni.openDocument({
        fileType: 'pdf',
        showMenu: true,
        filePath: openDocumentPath,
        success: () => {
          console.log('打开PDF成功')
        },
        fail: (err) => {
          uni.showToast({
            title: '打开文档失败,请重试!'
          })
        }
      })
    }
  })
}

如果你的链接是base64,那么这个方案适合你

const times = new Date().getTime();
let userPath = '';
// #ifdef MP-ALIPAY
userPath = my.env.USER_DATA_PATH;
// #endif
// #ifdef MP-WEIXIN
userPath = wx.env.USER_DATA_PATH;
// #endif
// #ifdef MP-BAIDU
userPath = swan.env.USER_DATA_PATH;
// #endif

let filePath = userPath + '/' + times + '.pdf';

export default (data) => {
  const fileSystemManager = uni.getFileSystemManager(); 
  fileSystemManager.writeFile({
    //保存本地临时路径
    filePath,
    data,
    encoding: 'base64',
    success: (res) => {
      uni.openDocument({
        fileType: 'pdf',
        showMenu: true,
        filePath,
        success: function (res) {
          console.log('打开PDF成功')
        },
        fail(err) {
          uni.showToast({
            title: '打开文档失败,请重试!'
          })
        }
      })
    }
  })
}

总结:
主要思路还是通过不同的api将文件先下载到小程序存储,通过uni.openDocument去打开,

  1. 配置相应服务器域名。
  2. 使用对应小程序api预览。

下载:
仅微信安卓端可实现,
uni.openDocument 打开 showMenu: true,
其实就是微信预览的时候,开启menu,通过右上角的三个点点击后保存到手机。

看到其他大牛给到的方案,都不是很完美,贴个链接吧。

微信小程序下载文件,保存文件功能总结

  1. 通过base64或pdf链接 转 png后,再fileSystemManager.saveFile API保存文件为图片格式;
    下载,完事让用户自己改后缀。

  2. 先使用下载文件api把文件下载下来,再使用wx.openDocument() 打开文件里面加上showMenu字段,然后就可以看到在打开的文件右上角出现了,
    ​ ios表现:ios点击之后会有发送给朋友的选项,选择分享给朋友之后就可以把文件直接发送给对方了,然后你就可以在聊天记录里面拿到这个文件;

这两种方式 都不是很完美,所以 小程序端暂时不建议提供下载功能,
除非给个链接 让用户沾出去从浏览器下载。文章来源地址https://www.toymoban.com/news/detail-609617.html

到了这里,关于uni-app 微信小程序 支付宝小程序(alipay) 百度小程序(baidu),预览pdf(链接和base64) 及下载(仅微信),window.open uni.downloadFile的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp开发APP跳转微信小程序和支付宝小程序(安卓版)

    开发APP时需要支付时跳转微信或者支付宝去支付,但是因为银行合作问题不能直接跳转,所以选择跳转到小程序页面进行支付,微信小程序和支付宝小程序写法不同 APP跳转微信小程序 (需要manifest.json中APP模块配置Share中微信分享保持开启) 微信小程序原始id在微信开放平台查

    2024年02月06日
    浏览(61)
  • 支付宝小程序 生成https链接 生成alipays协议链接

    业务场景介绍: H5移动端支持微信支付 [ 微信支付分为微信内支付(JSAPI支付官方API)和微信外支付(H5支付官方API)] 支付宝支付 [手机网站支付转 APP 支付 官方API ] 订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成订单(后续支付都是这个逻辑进行

    2024年02月08日
    浏览(47)
  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(123)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(86)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(173)
  • uni-app 微信、支付宝APP支付流程

    1、登录微信开放平台,添加移动应用,审核通过后可获取应用ID(AppID,支付订单中需要使用) 2、使用商户号和登录密码登录微信商户平台,进入 “账户中心” “API安全” “设置APIv2密钥” 设置API密钥(用于服务器生成订单),详情参考API证书及密钥 APP支付流程 3、在ma

    2024年02月13日
    浏览(47)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(73)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(82)
  • uni-app(微信小程序)获取当前位置uni.getLocation

     1、微信公众平台  开发  开发管理   2、开通之后到项目文件    3、下载腾讯地图插件并引入到文件中    

    2024年02月11日
    浏览(67)
  • uni-app 微信小程序自定义导航栏

    上面的导航栏主要由状态栏(就是手机电量显示栏)和小程序的导航栏组成,android手机一般为48px,ios手机一般为44px 1、设置navigationStyle:custom 2、页面导航栏div 3、获取statusBarHeight高度 4、获取navTitleHeight的高度

    2024年02月14日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包