uniapp实现h5、app、微信小程序三端pdf文件下载和预览

骑猪看日落 2024-04-08 12:04 55阅读 0赞

以下代码兼容三端，app，h5，微信小程序，经过个人测试  
手机端有两种方法，使用[renderjs][]或者uniapp的api  
两者的区别

*  使用renderjs的写法，会提示用户是否下载文件，下载完成后用户需要手动点击下载的文件，才会打开文件
 *  使用uniapp的api则可以直接下载并直接预览，不需要用户操作
 *  根据场景需求进行选择即可
 *  ios需要注意中文名称的文件需要转码[https://blog.csdn.net/weixin\_45122120/article/details/107956432][https_blog.csdn.net_weixin_45122120_article_details_107956432]

<template>
      <div>
        
        <button @click="test.exportPDF">预览和下载pdf（renderjs）</button>
        <button @click="exportPDF">预览和下载pdf（uniapp api）</button>
        
        
        <button @click="exportPDF">预览和下载pdf</button>
        
      </div>
    </template>
    
    
    <script module="test" lang="renderjs">
    export default {
          
      methods: {
          
        exportPDF() {
          
          const Url = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf"
          const a = document.createElement("a")
          a.href = Url
          a.download = "download"
          a.click()
        }
      }
    }
    </script>
    
    
    <script>
    export default {
          
      methods: {
          
        exportPDF() {
          
          //  #ifdef H5
          window.open(
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf"
          )
          // #endif
    
          // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
          // #ifdef MP-WEIXIN
          uni.downloadFile({
          
            url:
              "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf",
            success: res => {
          
              console.log(res)
              if (res.statusCode === 200) {
          
                // 预览pdf文件
                uni.openDocument({
          
                  filePath: res.tempFilePath,
                  showMenu: true, // 右上角菜单，可以进行分享保存pdf
                  success: function(file) {
          
                    console.log("file-success", file)
                  }
                })
              }
            }
          })
          // #endif
    
          // #ifdef APP-PLUS
          uni.downloadFile({
          
            url:
              "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf",
            success: res => {
          
              console.log(res)
              if (res.statusCode === 200) {
          
                // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
                uni.saveImageToPhotosAlbum({
          
                  filePath: res.tempFilePath,
                  success: function() {
          
                    uni.showToast({
          
                      title: "文件已保存至/DCIM/CAMERA文件夹下",
                      icon: "none"
                    })
                    setTimeout(function() {
          
                      // 预览pdf文件
                      uni.openDocument({
          
                        filePath: res.tempFilePath,
                        showMenu: true,
                        success: function(file) {
          
                          console.log("file-success", file)
                        }
                      })
                    }, 1500)
                  },
                  fail: function() {
          
                    uni.showToast({
          
                      title: "保存失败，请稍后重试！",
                      icon: "none"
                    })
                  }
                })
              }
            }
          })
          // #endif
        }
      }
    }
    </script>

[renderjs]: https://uniapp.dcloud.net.cn/tutorial/renderjs.html#renderjs
[https_blog.csdn.net_weixin_45122120_article_details_107956432]: https://blog.csdn.net/weixin_45122120/article/details/107956432