微信小程序点击单个图片进行预览图片，点击预览pdf文件

2022-12-10 08:55 499阅读 0赞

这里介绍的是单个图片点击预览的，也可以多张，方法差不多  
**index.wxml**

<view class="page">
      <view class="page__hd">
          <text class="page__title">image</text>
          <text class="page__desc">图片</text>
      </view>
      <view class='imgList'>
          <view class='imgList-li'>
              <image src="{ {ItemUrl}}{ {imgurl}}" mode="scaleToFill" bindtap='previewImg'></image>
          </view>
      </view>
    </view>

**index.wxss**

.imgList{ 
        width: 100%;
      }
      .imgList .imgList-li{ 
        width: 300rpx;
        height: 300rpx;
      }
      .imgList .imgList-li image{ 
        width: 300rpx;
        height: 300rpx;
      }

**index.js**

Page({ 
      data: { 
        imgurl :'/dmsmty/74_74_100/t01df7265f2a34fadb9.png',
        ItemUrl: 'https://p.ssl.qhimg.com'
      },
      previewImg:function(e){ 
        var imgArrUrl = this.data.ItemUrl + this.data.imgurl;
        wx.previewImage({ 
          current: imgArrUrl,     //当前图片地址
          urls: imgArrUrl.split(","),  //所有要预览的图片的地址集合 数组形式['https://p.ssl.qhimg.com/dmsmty/74_74_100/t01df7265f2a34fadb9.png']
          success: function(res) { },
          fail: function(res) { },
          complete: function(res) { },
        })
      }
    })

如果是点击预览pdf文件（真机华为手机可能有问题）

wx.downloadFile({ 
          url: 'https://storage.jd.com/eicore-fm.jd.com/042001900211-71246106.pdf?Expires=2538379555&A',      //要预览的PDF的地址
               success: function (res) {                            
                 console.log(res);
                 if (res.statusCode === 200) {                      //成功
                   var Path = res.tempFilePath                     //返回的文件临时地址，用于后面打开本地预览所用
                   wx.openDocument({ 
                     filePath: Path,                               //要打开的文件路径
                     success: function (res) { 
                       console.log('打开PDF成功');
                     }
                   })
                 }
               },
               fail: function (res) { 
                 console.log(res);                                  //失败
               }
           })