微信小程序web-view 嵌套h5界面实现文件预览效果

news2024/12/26 11:45:24

实现方法：(这里我是在小程序里面单独加了一个页面用来下载预览文件)

安装

使用方法请参考文档
npm 安装

npm install  weixin-js-sdk
import wx from 'weixin-js-sdk'

预览

h5界面代码

	<u-button @click="onclick" type="primary" :loading="butLoad" loadingText="加载中...">预览</u-button>

onclick(){
    const tempFilePath = 'http://example.com/somefile.pdf'

	if (window.__wxjs_environment !== 'miniprogram') {
	       uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功')

					},
					fail: function(err) {
						console.log('失败，', err);

					}
				})
       return
      }
      //这里需要注意一下，不要把下面这一行代码单独提出来放一下方法里面，会不生效（具体为啥我也没找到原因,如果有知道麻烦告知一下）
	wx.miniProgram.navigateTo({url: `/pages/weiVie/index?url=${tempFilePath}`})
},

小程序界面需要建一个文件
在这里插入图片描述
index.js 代码（index.wxml 文件是空的，看个人需要）

 onLoad(e){
 //获取从h5传过来的地址
      const {url}=e
    //   返回上一页 (这步骤加上不会出现空白页面，返回预览看的界面是你预览前的界面)
      wx.navigateBack({data:1})
    //   下载
     wx.downloadFile({
        url: e.url,
        success: function(res) {
            // 预览
        wx.openDocument({
          filePath:res.tempFilePath,
          showMenu: true,//是否打开右上角菜单
          success: function (res) {
            console.log('打开文档成功')
          },
          fail: function(err) {
            console.log('失败，',err);

          }
        })	
    },fail: function(err) {
            //   that.setData({fail:true,loading:false,text:'下载失败',})
            console.log('失败，', err);

        }
    })
  },