小程序查看(预览)文件

简介: 小程序查看(预览)文件

一、场景

在小程序中需要查看(预览)文件。

二、代码实现

步骤:1、下载文件,2、预览文件。

downloadFilePreview () {
      wx.showToast({
        title: '打开中…',
        icon: 'loading',
        duration: 100000
      })
      wx.downloadFile({
        url: 'https://www.abc.com/abc.pdf', // 这里换上自己的pdf地址
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          var Path = res.tempFilePath // 返回的文件临时地址,用于后面打开本地预览所用
          wx.openDocument({
            filePath: Path,
            fileType: 'pdf', // 指定文件类型
            success: function (res) {
              wx.hideToast()
            },
            fail: function (res) {
              console.log('打开失败', res)
            }
          })
        },
        fail: function (res) {
          wx.showToast({
            title: '下载失败',
            icon: 'loading',
            duration: 1000
          })
        }
      })
    },

三、注意事项

配置downloadFile域名

下载类型

fileType: 'pdf'

四、相关API

wx.downloadFile

wx.openDocument

 

四、效果

 

五、欢迎交流指正

相关文章
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
338 0
|
小程序
小程序一键全局一秒变黑白(效果预览)
小程序一键全局一秒变黑白(效果预览)
279 0
|
小程序
【uniapp】视频分享预览小程序
【uniapp】视频分享预览小程序
419 0
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
小程序
微信小程序如何实现多图上传及预览删除
微信小程序如何实现多图上传及预览删除
514 0
|
小程序
解决微信小程序echarts图表真机预览模糊
解决微信小程序echarts图表真机预览模糊
662 0
|
小程序 JavaScript
微信小程序图片放大预览效果的实现,轮播图点击放大预览
微信小程序图片放大预览效果的实现,轮播图点击放大预览
1718 0
|
小程序 前端开发 安全
【C#】 MVC4 开发小程序-实现人脸识别-本地和手机预览使用IP测试
小程序Camera组件拍照上传图片到指定的服务器(本地或者外网的IP服务器),然后C# MVC后台调用百度人脸识别接口,实现人脸识别功能呢
|
小程序 IDE API
iOS 端预览和调试小程序| 学习笔记
快速学习 iOS 端预览和调试小程序。
iOS 端预览和调试小程序| 学习笔记
|
小程序 IDE API
IOS 端预览和调试小程序|学习笔记
快速学习 IOS 端预览和调试小程序
328 0
IOS 端预览和调试小程序|学习笔记

热门文章

最新文章