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

以下代码兼容三端，app，h5，微信小程序，经过个人测试

手机端有两种方法，使用renderjs或者uniapp的api

两者的区别

• 使用renderjs的写法，会提示用户是否下载文件，下载完成后用户需要手动点击下载的文件，才会打开文件
• 使用uniapp的api则可以直接下载并直接预览，不需要用户操作
• 根据场景需求进行选择即可
• 1.  
     <template>
  2.  
     <div>
  3.  
     <!-- #ifdef APP-PLUS -->
  4.  
     <button @click="test.exportPDF">预览和下载pdf（renderjs）</button>
  5.  
     <button @click="exportPDF">预览和下载pdf（uniapp api）</button>
  6.  
     <!-- #endif -->
  7.  
     <!-- #ifndef APP-PLUS -->
  8.  
     <button @click="exportPDF">预览和下载pdf</button>
  9.  
     <!-- #endif -->
  10.  
      </div>
  11.  
      </template>
  12.  
       
  13.  
      <!-- #ifdef APP-PLUS -->
  14.  
      <script module="test" lang="renderjs">
  15.  
      export default {
  16.  
      methods: {
  17.  
      exportPDF() {
  18.  
      const Url = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf"
  19.  
      const a = document.createElement("a")
  20.  
      a.href = Url
  21.  
      a.download = "download"
  22.  
      a.click()
  23.  
      }
  24.  
      }
  25.  
      }
  26.  
      </script>
  27.  
      <!-- #endif -->
  28.  
       
  29.  
      <script>
  30.  
      export default {
  31.  
      methods: {
  32.  
      exportPDF() {
  33.  
      // #ifdef H5
  34.  
      window.open(
  35.  
      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf"
  36.  
      )
  37.  
      // #endif
  38.  
       
  39.  
      // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
  40.  
      // #ifdef MP-WEIXIN
  41.  
      uni.downloadFile({
  42.  
      url:
  43.  
      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf",
  44.  
      success: res => {
  45.  
      console.log(res)
  46.  
      if (res.statusCode === 200) {
  47.  
      // 预览pdf文件
  48.  
      uni.openDocument({
  49.  
      filePath: res.tempFilePath,
  50.  
      showMenu: true, // 右上角菜单，可以进行分享保存pdf
  51.  
      success: function(file) {
  52.  
      console.log("file-success", file)
  53.  
      }
  54.  
      })
  55.  
      }
  56.  
      }
  57.  
      })
  58.  
      // #endif
  59.  
       
  60.  
      // #ifdef APP-PLUS
  61.  
      uni.downloadFile({
  62.  
      url:
  63.  
      "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf",
  64.  
      success: res => {
  65.  
      console.log(res)
  66.  
      if (res.statusCode === 200) {
  67.  
      // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
  68.  
      uni.saveImageToPhotosAlbum({
  69.  
      filePath: res.tempFilePath,
  70.  
      success: function() {
  71.  
      uni.showToast({
  72.  
      title: "文件已保存至/DCIM/CAMERA文件夹下",
  73.  
      icon: "none"
  74.  
      })
  75.  
      setTimeout(function() {
  76.  
      // 预览pdf文件
  77.  
      uni.openDocument({
  78.  
      filePath: res.tempFilePath,
  79.  
      showMenu: true,
  80.  
      success: function(file) {
  81.  
      console.log("file-success", file)
  82.  
      }
  83.  
      })
  84.  
      }, 1500)
  85.  
      },
  86.  
      fail: function() {
  87.  
      uni.showToast({
  88.  
      title: "保存失败，请稍后重试！",
  89.  
      icon: "none"
  90.  
      })
  91.  
      }
  92.  
      })
  93.  
      }
  94.  
      }
  95.  
      })
  96.  
      // #endif
  97.  
      }
  98.  
      }
  99.  
      }
  100.  
       </script>
  

这篇好文章是转载于：学新通技术网