微信小程序展示长图与pdf_将微信小程序页面生成pdf

一、效果

二、代码部分

实现思路，就是使用常用控件view ,但是会遇到的问题是，长图大小超过屏幕大小时，就会出现图片被压缩的情况。最后，可以加上scroll-view来解决这个问题，实现代码如下：

xml部分

http://192.168.98.1:8080/web/xx.jpg说明，这个地址是清明上河图地址，本人测试的时候是存放在本地的tomcat目录下，通过启用tomcat应用来部署实现链接访问。

<!-- 图片展示测试 -->
<view wx:if="{{true}}">
<scroll-view scroll-y="{{true}}" style="width:100%;height:{{sysheight}}px;">
     <view class="img-size">
        <image src="http://192.168.98.1:8080/web/xx.jpg" mode="widthFix" class="liucheng-img"></image>
     </view>
 </scroll-view>
</view> 

js部分

  //获取设备屏幕高度
    wx.getSystemInfo({
      success: (result) => {
        this.setData({
          sysheight:result.windowHeight
        })
      },
    });

css部分

page{
  width: 100%;
  height: 100%;
  }
  
  .img-size {
    width: 100%;
    margin: auto;
  }
  
  .liucheng-img {
    width: 100%;
    height: 100%;
  }

三、展示pdf

展示方式，第一可以直接使用webview

<web-view src="{{pathData}}" </web-view>

或者使用第三方库pdf.js

<web-view src="https://byfile.disscode.cn/pdfjs-2.8/web/viewer.html?file={{url}}"></web-view>

还可以使用微信小程序自带api先下载后打开

wx.downloadFile({
      url: "http://192.168.43.101:8080/web/yu.pdf",//可以是后台传过来的路径
      success: function(res) {
          const filePath = res.tempFilePath
          console.log("下载文件成功=="+JSON.stringify(res.data))
          wx.openDocument({
              filePath: filePath,
              success: function(res) {
                  //成功
                  console.log("打开文件成功=="+JSON.stringify(res.data))
              },
              fail:function(res){
                console.log("打开文件失败=="+JSON.stringify(res.data))
              }
          })
      },
      fail:function(res){
        console.log("下载文件失败=="+JSON.stringify(res.data))
      }
  })