快捷導(dǎo)航

uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能

更新時間：2022年12月09日 11:17:53 作者：永遠不會太晚

作為使用uni-app的小白來說,嘗試了好幾種方法,終于得到了我想要的效果,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下

以下代碼兼容三端，app，h5，微信小程序，經(jīng)過個人測試

手機端有兩種方法，使用renderjs或者uniapp的api

兩者的區(qū)別

使用renderjs的寫法，會提示用戶是否下載文件，下載完成后用戶需要手動點擊下載的文件，才會打開文件
使用uniapp的api則可以直接下載并直接預(yù)覽，不需要用戶操作
根據(jù)場景需求進行選擇即可

<template>
  <div>
    <!-- #ifdef APP-PLUS -->
    <button @click="test.exportPDF">預(yù)覽和下載pdf（renderjs）</button>
    <button @click="exportPDF">預(yù)覽和下載pdf（uniapp api）</button>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS -->
    <button @click="exportPDF">預(yù)覽和下載pdf</button>
    <!-- #endif -->
  </div>
</template>

<!-- #ifdef APP-PLUS -->
<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>
<!-- #endif -->

<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

      // 微信下載文件需要在微信公眾平臺>開發(fā)>開發(fā)管理>服務(wù)器域名>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) {
            // 預(yù)覽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() {
                  // 預(yù)覽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>

總結(jié)

到此這篇關(guān)于uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能的文章就介紹到這了,更多相關(guān)uniapp實現(xiàn)pdf文件下載預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: