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

智能推荐

18个顶级人工智能平台-程序员宅基地

文章浏览阅读1w次,点赞2次,收藏27次。来源:机器人小妹  很多时候企业拥有重复,乏味且困难的工作流程,这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本,企业别无选择,只能自动化某些功能以降低生产成本。  通过数字化..._人工智能平台

electron热加载_electron-reloader-程序员宅基地

文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面,而不必每次去手动操作重新运行,这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便,但是不是每个 electron 项目必须的,所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader,国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader

android 11.0 去掉recovery模式UI页面的选项_android recovery 删除 部分菜单-程序员宅基地

文章浏览阅读942次。在11.0 进行定制化开发,会根据需要去掉recovery模式的一些选项 就是在device.cpp去掉一些选项就可以了。_android recovery 删除 部分菜单

mnn linux编译_mnn 编译linux-程序员宅基地

文章浏览阅读3.7k次。https://www.yuque.com/mnn/cn/cvrt_linux_mac基础依赖这些依赖是无关编译选项的基础编译依赖• cmake(3.10 以上)• protobuf (3.0 以上)• 指protobuf库以及protobuf编译器。版本号使用 protoc --version 打印出来。• 在某些Linux发行版上这两个包是分开发布的,需要手动安装• Ubuntu需要分别安装 libprotobuf-dev 以及 protobuf-compiler 两个包•..._mnn 编译linux

利用CSS3制作淡入淡出动画效果_css3入场效果淡入淡出-程序员宅基地

文章浏览阅读1.8k次。CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果。下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。1. 定义动画,名称为fadeIn@-webkit-keyf_css3入场效果淡入淡出

计算机软件又必须包括什么,计算机系统应包括硬件和软件两个子系统,硬件和软件又必须依次分别包括______?...-程序员宅基地

文章浏览阅读2.8k次。计算机系统应包括硬件和软件两个子系统,硬件和软件又必须依次分别包括中央处理器和系统软件。按人的要求接收和存储信息,自动进行数据处理和计算,并输出结果信息的机器系统。计算机是脑力的延伸和扩充,是近代科学的重大成就之一。计算机系统由硬件(子)系统和软件(子)系统组成。前者是借助电、磁、光、机械等原理构成的各种物理部件的有机组合,是系统赖以工作的实体。后者是各种程序和文件,用于指挥全系统按指定的要求进行..._计算机系统包括硬件系统和软件系统 软件又必须包括

随便推点

进程调度(一)——FIFO算法_进程调度fifo算法代码-程序员宅基地

文章浏览阅读7.9k次,点赞3次,收藏22次。一 定义这是最早出现的置换算法。该算法总是淘汰最先进入内存的页面,即选择在内存中驻留时间最久的页面予以淘汰。该算法实现简单,只需把一个进程已调入内存的页面,按先后次序链接成一个队列,并设置一个指针,称为替换指针,使它总是指向最老的页面。但该算法与进程实际运行的规律不相适应,因为在进程中,有些页面经常被访问,比如,含有全局变量、常用函数、例程等的页面,FIFO 算法并不能保证这些页面不被淘汰。这里,我_进程调度fifo算法代码

mysql rownum写法_mysql应用之类似oracle rownum写法-程序员宅基地

文章浏览阅读133次。rownum是oracle才有的写法,rownum在oracle中可以用于取第一条数据,或者批量写数据时限定批量写的数量等mysql取第一条数据写法SELECT * FROM t order by id LIMIT 1;oracle取第一条数据写法SELECT * FROM t where rownum =1 order by id;ok,上面是mysql和oracle取第一条数据的写法对比,不过..._mysql 替换@rownum的写法

eclipse安装教程_ecjelm-程序员宅基地

文章浏览阅读790次,点赞3次,收藏4次。官网下载下载链接:http://www.eclipse.org/downloads/点击Download下载完成后双击运行我选择第2个,看自己需要(我选择企业级应用,如果只是单纯学习java选第一个就行)进入下一步后选择jre和安装路径修改jvm/jre的时候也可以选择本地的(点后面的文件夹进去),但是我们没有11版本的,所以还是用他的吧选择接受安装中安装过程中如果有其他界面弹出就点accept就行..._ecjelm

Linux常用网络命令_ifconfig 删除vlan-程序员宅基地

文章浏览阅读245次。原文链接:https://linux.cn/article-7801-1.htmlifconfigping &lt;IP地址&gt;:发送ICMP echo消息到某个主机traceroute &lt;IP地址&gt;:用于跟踪IP包的路由路由:netstat -r: 打印路由表route add :添加静态路由路径routed:控制动态路由的BSD守护程序。运行RIP路由协议gat..._ifconfig 删除vlan

redux_redux redis-程序员宅基地

文章浏览阅读224次。reduxredux里要求把数据都放在公共的存储区域叫store里面,组件中尽量少放数据,假如绿色的组件要给很多灰色的组件传值,绿色的组件只需要改变store里面对应的数据就行了,接着灰色的组件会自动感知到store里的数据发生了改变,store只要有变化,灰色的组件就会自动从store里重新取数据,这样绿色组件的数据就很方便的传到其它灰色组件里了。redux就是把公用的数据放在公共的区域去存..._redux redis

linux 解压zip大文件(解决乱码问题)_linux 7za解压中文乱码-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏6次。unzip版本不支持4G以上的压缩包所以要使用p7zip:Linux一个高压缩率软件wget http://sourceforge.net/projects/p7zip/files/p7zip/9.20.1/p7zip_9.20.1_src_all.tar.bz2tar jxvf p7zip_9.20.1_src_all.tar.bz2cd p7zip_9.20.1make && make install 如果安装失败,看一下报错是不是因为没有下载gcc 和 gcc ++(p7_linux 7za解压中文乱码