微信小程序预览pdf,页面缓存下载过的pdf_微信浏览器请求pdf文件会缓存吗-程序员宅基地

技术标签: 小程序  

需求:
  点击预览图标查看该pdf报告

问题:
  1、最早是直接将请求到的url放入到<web-view src="{ {realUrl}}"></web-view>中展示,ios可以,安卓显示无法查看。
  2、通过微信自身的API实现:wx.downloadFile({})、wx.saveFile({})、wx.openDocument({})
  3、对于文件较大的,下载较慢,需要点击过的进行缓存,再次点击无需下载,直接打开。
  将点击过的下载的url添加给list的temUrl,再次点击的时候判断该行是否存在temUrl,存在的话则直接wx.openDocument({})打开该url;不存在的话则先下载保存再去打开。当退出该页面时,缓存消失,因为是给list列表添加新的属性保存url,如果再次进入刷新页面则请求到的数据会重新给list进行赋值。
在这里插入图片描述

<view bindtap="onLoadClick" data-id="{
     {item.id}}" data-name="{
     {item.fileName}}"><image class="downLoad" src="../../../images/preview-open.png"></image></view>
downloadfile: function (url, name, id) {
    
    let list = this.data.list
    let falg
    let listUrl
    list.find(item => {
    
      if (item.id === id) {
    
        falg =  item.hasOwnProperty('temUrl')
        listUrl = item.temUrl
      }
    })
      //下载文件,生成临时地址
      wx.showLoading({
    
        title: '下载中',
      })
      if (falg) {
    
        //保存到本地
        wx.openDocument({
    
          filePath: listUrl,
          fileType: 'pdf',
          success: function (res) {
    
            wx.hideLoading()
          },
          fail: function (err) {
    
            wx.hideLoading()
          },
          // showMenu: true
        })
      } else {
    
        wx.downloadFile({
    
          url: url, 
          success(res) {
    
            //保存到本地
            wx.saveFile({
    
              tempFilePath: res.tempFilePath,
              id: id,
              // 给文件重命名
              filePath:wx.env.USER_DATA_PATH+'/' + name,
              success: function (res) {
    
                wx.hideLoading()
                const savedFilePath = res.savedFilePath;
                list.find(item => {
    
                  if (item.id === id) {
    
                    item.temUrl = savedFilePath
                  }
                })
                  // 打开文件
                  wx.openDocument({
    
                    filePath: savedFilePath,
                    fileType: 'pdf',
                    success: function (res) {
    
                      // console.log('打开文档成功')
                    },
                    fail: function (err) {
    
                      wx.hideLoading()
                      // console.log('打开失败:', err)
                    },
                    // showMenu: true
                  })
                },
                fail: function (err) {
    
                  hideLoad()
                  wx.showModal({
    
                    title: '提示',
                    content: '小程序暂不支持此类型文件预览',
                    showCancel: false,
                    success (res) {
    
                      if (res.confirm) {
    
                        // console.log('用户点击确定')
                      } else if (res.cancel) {
    
                        // console.log('用户点击取消')
                      }
                    }
                  })
                }
            });
          }
        })
      }
      this.setData({
    
        "list": list
      })
      // console.log('lits', list)
  },
  getListDetail: function (query) {
    
    util.dataInformation('加载中', `/file/view`, 'GET', query, res => {
    
      if (res.data.data) {
    
        let data = res.data.data
        // console.log('data', data)
        this.setData({
    
          "url": data
        })
        this.downloadfile(data, this.data.name, this.data.urlParams.id)
      }
    })
  },
  onLoadClick: function (e) {
    
    let id = e.currentTarget.dataset.id
    this.setData({
    
      "urlParams.id": id,
      "name": e.currentTarget.dataset.name
    })
    this.getListDetail(this.data.urlParams)
  },

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

参考文章:
小程序web-view打开PDF格式文件的安卓苹果兼容性问题
微信小程序web-view安卓提示无法打开页面为什么?
微信小程序-WX.DOWNLOADFILE()文件管理之下载、打开、重命名
getSavedFileList返回fileList为空
wx.saveFile(Object object)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/guairena/article/details/118682121

智能推荐

QT设置QLabel中字体的颜色_qolable 字体颜色-程序员宅基地

文章浏览阅读8k次,点赞2次,收藏6次。QT设置QLabel中字体的颜色其实,这是一个比较常见的问题。大致有几种做法:一是使用setPalette()方法;二是使用样式表;三是可以使用QStyle;四是可以在其中使用一些简单的HTML样式。下面就具体说一下,也算是个总结吧。第一种,使用setPalette()方法如下:QLabel *label = new QLabel(tr("Hello Qt!"));QP_qolable 字体颜色

【C#】: Import “google/protobuf/timestamp.proto“ was not found or had errors.问题彻底被解决!_import "google/protobuf/timestamp.proto" was not f-程序员宅基地

文章浏览阅读3.7k次。使用C# 作为开发语言,将pb文件转换为cs文件的时候相信很多人都会遇到一个很棘手的问题,那就是protoc3环境下,import Timestamp的问题,在头部 import “google/protobuf/timestamp.proto”;的时候会抛异常:google/protobuf/timestamp.proto" was not found or had errors;解决办法【博主「pamxy」的原创文章的分享】:(注:之后才发现,不需要添加这个目录也可以,因为timestamp.p_import "google/protobuf/timestamp.proto" was not found or had errors.

安卓抓取JD wskey + 添加脚本自动转换JD cookie_jd_wsck-程序员宅基地

文章浏览阅读4.1w次,点赞9次,收藏98次。一、准备工具: 1. app:VNET(抓包用)、京东; 安卓手机需要下载VNET软件。下载官网:https://www.vnet-tech.com/zh/ 2. 已安装部署好的青龙面板;二、抓包wskey: 1. 打开已下载的VNET软件,第一步先安装CA证书; 点击右下角三角形按钮(开始抓包按钮),会提示安装证书,点击确定即可,app就会将CA证书下载至手机里,随后在手机设置里进行安装,这里不同手机可能安装位置不同,具体..._jd_wsck

Mybatis-Plus自动填充失效问题:当字段不为空时无法插入_mybatisplus插入不放为空的字段-程序员宅基地

文章浏览阅读2.9k次,点赞7次,收藏3次。本文针对mybatis-plus自动填充第一次更新能正常填充,第二次更新无法自动填充问题。????mybatis-plus自动填充:当要填充的字段不为空时,填充无效问题的解决????先上一副官方的图:取自官方:https://mp.baomidou.com/guide/auto-fill-metainfo.html第三条注意事项为自动填充失效原因:MetaObjectHandler提供的默认方法的策略均为:如果属性有值则不覆盖,如果填充值为null则不填充以官方案例为例:```java_mybatisplus插入不放为空的字段

Matlab 生成exe执行文件_matlab exe-程序员宅基地

文章浏览阅读1w次,点赞25次,收藏94次。利用 Application Complier 完成MATLAB转exe文件_matlab exe

Android下集成Paypal支付-程序员宅基地

文章浏览阅读137次。近期项目需要研究paypal支付,官网上的指导写的过于复杂,可能是老外的思维和中国人不一样吧。难得是发现下面这篇文章:http://www.androidhive.info/2015/02/Android-integrating-paypal-using-PHP-MySQL-part-1/在这篇文章的基础上,查看SDK简化了代码,给出下面这个例子,..._paypal支付集成到anroid应用中

随便推点

MIT-BEVFusion系列五--Nuscenes数据集详细介绍,有下载好的图片_nuscense数据集-程序员宅基地

文章浏览阅读2.3k次,点赞29次,收藏52次。nuScenes 数据集 (pronounced /nu:ːsiː:nz/) 是由 Motional (以前称为 nuTonomy) 团队开发的自动驾驶公共大型数据集。nuScenes 数据集的灵感来自于开创性的 KITTI 数据集。nuScenes 是第一个提供自动驾驶车辆整个传感器套件 (6 个摄像头、1 个 LIDAR、5 个 RADAR、GPS、IMU) 数据的大型数据集。与 KITTI 相比,nuScenes 包含的对象注释多了 7 倍。_nuscense数据集

python mqtt publish_Python Paho MQTT:无法立即在函数中发布-程序员宅基地

文章浏览阅读535次。我正在实现一个程序,该程序可以侦听特定主题,并在ESP8266发布新消息时对此做出反应.从ESP8266收到新消息时,我的程序将触发回调并执行一系列任务.我在回调函数中发布了两条消息,回到了Arduino正在侦听的主题.但是,仅在函数退出后才发布消息.谢谢您的所有宝贵时间.我试图在回调函数中使用loop(1),超时为1秒.该程序将立即发布该消息,但似乎陷入了循环.有人可以给我一些指针如何在我的回调..._python 函数里面 mqtt调用publish方法 没有效果

win11怎么装回win10系统_安装win10后卸载win11-程序员宅基地

文章浏览阅读3.4w次,点赞16次,收藏81次。微软出来了win11预览版系统,很多网友给自己的电脑下载安装尝鲜,不过因为是测试版可能会有比较多bug,又只有英文,有些网友使用起来并不顺畅,因此想要将win11退回win10系统。那么win11怎么装回win10系统呢?今天小编就教下大家win11退回win10系统的方法。方法一:1、首先点击开始菜单,在其中找到“设置”2、在设置面板中,我们可以找到“更新和安全”3、在更新和安全中,找到点击左边栏的“恢复”4、恢复的右侧我们就可以看到“回退到上版本的win10”了。方法二:_安装win10后卸载win11

SQL Server菜鸟入门_sql server菜鸟教程-程序员宅基地

文章浏览阅读3.3k次,点赞2次,收藏3次。数据定义_sql server菜鸟教程

Leetcode 数组(简单题)[1-1000题]_给定一个浮点数数组nums(逗号分隔)和一个浮点数目标值target(与数组空格分隔),请-程序员宅基地

文章浏览阅读1.9k次。1. 两数之和给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是,你不能重复利用这个数组中同样的元素。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]方法一..._给定一个浮点数数组nums(逗号分隔)和一个浮点数目标值target(与数组空格分隔),请

python性能优化方案_python 性能优化方法小结-程序员宅基地

文章浏览阅读152次。提高性能有如下方法1、Cython,用于合并python和c语言静态编译泛型2、IPython.parallel,用于在本地或者集群上并行执行代码3、numexpr,用于快速数值运算4、multiprocessing,python内建的并行处理模块5、Numba,用于为cpu动态编译python代码6、NumbaPro,用于为多核cpu和gpu动态编译python代码为了验证相同算法在上面不同实现..._np.array 测试gpu性能

推荐文章

热门文章

相关标签