微信小程序预览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

智能推荐

用Tab键的程序员为什么瞧不起用Space键的?_敲代码 tab键-程序员宅基地

文章浏览阅读472次。对程序员来说,熬得秃顶也无法解决的四大难题是:1.世界上最好的语言是什么?2.世界上最好的编辑器是什么?3.用Tab好还是Space好?4.到底要不要写分号?黑市的程序员天哥,把全公司女同事都加为了微信好友,开化如他,也难逃此劫。来自“东方鲁尔”的他,深受严谨工业精神的熏陶,是Tab键的忠诚卫士,只要手底下的实习生敲响了Space键,天哥就会条件反射,嗷地一声转过头,去..._敲代码 tab键

基于SpringBoot+Vue的小徐影城管理系统的设计与实现(源码+lw+部署文档+讲解等)-程序员宅基地

文章浏览阅读728次,点赞23次,收藏16次。博主介绍:全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战,以及程序定制化开发、全栈讲解、就业辅导精彩专栏 推荐订阅2023-2024年最值得选的微信小程序毕业设计选题大全:100个热门选题推荐2023-2024年最值得选的Java毕业设计选题大全:500个热门选题推荐Java精品实战案例《500套》

RDD编程实验_rdd编程中计算班级人数-程序员宅基地

文章浏览阅读5.7k次,点赞5次,收藏69次。RDD编程初级实践基于《Spark编程基础(Scala版)》目录RDD编程初级实践前言一、实验目的二、实验内容和要求三、实验步骤1.spark-shell交互式编程(1)该系总共有多少学生;(2)该系共开设了多少门课程;(3)Tom同学的总成绩平均分是多少;(4)求每名同学的选修的课程门数;(5)该系DataBase课程共有多少人选修;(6)各门课程的平均分是多少;(7)使用累加器计算共有多少人选了DataBase这门课。总结前言前面已经基于docker搭建好spark集群,集群为一台mast_rdd编程中计算班级人数

Log4j2AsyncAppender形式做异步日志_日志<async>-程序员宅基地

文章浏览阅读198次。Log4j2AsyncAppender形式做异步日志_日志

html特效文本框,各种html文本框input特效-程序员宅基地

文章浏览阅读291次。输入框景背景透明:鼠标划过输入框,输入框背景色变色:TYPE="text" SIZE="29"onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"style="width: 106; height: 21"onmouseout="this.style.borderColor='black';th..._ios html input 特效

docker上启动部署好的ES方法_如何确认docker启动的es是否成功-程序员宅基地

文章浏览阅读2k次。1.查看镜像文件有哪些docker images2.启动3.查看是否成功在浏览器输入:http://192.168.150.101:9200 可以判断es是否部署成功http://192.168.150.101:5601 可以判断kibana是否部署成功**注意:**需要修改成自己虚拟机的ip地址查看ip地址的方法:ip addr或者ifconfig..._如何确认docker启动的es是否成功

随便推点

模块度与Louvain社区发现算法_独立节点模块度-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏15次。Louvain 算法是基于模块度的社区发现算法,该算法在效率和效果上都表现较好,并且能够发现层次性的社区结构,其优化目标是最大化整个社区网络的模块度。模块度( Modularity ) 模块度是评估一个社区网络划分好坏的度量方法,它的物理含义是社区内节点的连边数与随机情况下的边数只差,它的取值范围是 [−1/2,1),其定义如下:$$Q = \frac{1}{2m}\su_独立节点模块度

数据科学研究的现状与趋势全解_近三年数据科学领域研究进展-程序员宅基地

文章浏览阅读4.6k次,点赞5次,收藏5次。大数据时代的到来催生了一门新的学科——数据科学。首先,本文探讨了数据科学的内涵、发展简史、学科地位及知识体系等基本问题,并提出了专业数据科学与专业中的数据科学之间的区别与联系;其次,分析现阶段数据科学的研究特点,并分别提出了专业数据科学、专业中的数据科学及大数据生态系统中的相对热门话题;接着,探讨了数据科学研究中的10个争议及挑战:思维模式的转变(知识范式还是数据范式)、对数据的认识(主动属性还是..._近三年数据科学领域研究进展

java计算机毕业设计springboot+vue超时代停车场管理平台系统_githubspringboot vue停车管理系统-程序员宅基地

文章浏览阅读126次。随着计算机信息技术的发展,越来越多的用户使用管理系统,各种信息化应用出现在停车管理中,特别是超时代停车场拥有大量的用户群,使用管理平台可以为人们的生活提供便利。本文先提出了开发基于Spring Boot的超时代停车场管理平台的背景意义,然后通过功能性和非功能性分析阐述本系统的需求,然后从功能设计和数据库设计两方面进行系统的设计建模。服务器管理端需要通过权限认证后进行登录,功能包括停车场管理、车辆信息的管理、公告信息的管理、停车记录、用户管理、停车位查看、财务收入统计。后端框架:springboot。_githubspringboot vue停车管理系统

人工智能导论实验——KNN_knn算法实验-程序员宅基地

文章浏览阅读648次。k近邻法(k-nearest neighbor,k-NN)是一种基本的分类和回归方法,是监督学习方法里的一种常用方法。分类时,对新的实例,根据其k个最近邻的训练实例类别,通过多数表决等方式进行预测。k近邻法三要素:距离度量、k值的选择和分类决策规则。k值的选择反映了对近似误差与估计误差之间的权衡,通常由交叉验证选择最优的k。分类决策规则往往是多数表决,即由输入实例的k个邻近输入实例中的多数类决定输入实例的类。模型训练时间快,上面说到KNN算法是惰性的,这里也就不再过多讲述。1) 了解KNN的基本概念;_knn算法实验

python常用转义字符串总结:各种字符转义的不同、如何取消转义字符效果?-程序员宅基地

文章浏览阅读573次,点赞13次,收藏20次。我们学习Python必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有阿里大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。Python所有方向的技术点做的整理,形成各个领域的知识点汇总,它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。观看零基础学习视频,看视频学习是最快捷也是最有效果的方式,跟着视频中老师的思路,从基础到深入,还是很容易入门的。print(‘v 的转义效果是:\v Python 集中营’)

Linux下手动安装screen_screen预编译二进制文件下载-程序员宅基地

文章浏览阅读1w次,点赞2次,收藏9次。简单说来就是自己用screen源码编译安装第一步:下载screen源码并解压下载地址:http://ftp.gnu.org/gnu/screen/第二步:运行配置程序,生成Makefile文件运行源码目录下的./configure,运行成功会得到如下提示:Now please check the pathnames in the Makefile and in the ..._screen预编译二进制文件下载