首页 > 建站教程 > APP开发,混合APP >  UniApp 实现 PDF 文件下载(二进制)、保存与查看功能(兼容Android、IOS、H5)正文

UniApp 实现 PDF 文件下载(二进制)、保存与查看功能(兼容Android、IOS、H5)

UniApp 实现 PDF 文件下载(二进制)、保存与查看功能(兼容Android、IOS、H5)

 /**
   * 下载pdf文件
   * @param {string} url - 文件的下载链接。
   */
  downloadPdf(url) {
    uni.downloadFile({
      url: url, //下载地址
      header: {
        authorization: Config.tokenPrefix + useUserStore().getToken()
      },
      responseType: "blob",
      success: (res) => {
        if (res.statusCode === 200) {
          console.log("res", res);
          uni.saveFile({
            tempFilePath: res.tempFilePath,
            success: (saveRes) => {
              console.log("文件保存路径:", saveRes.savedFilePath);
              // 在app端执行
              // #ifdef APP-PLUS
              let osname = plus.os.name;
              // 如果是安卓的话弹出提示
              if (osname == "Android") {
                uni.$showMsg("下载并保存成功");
              }
              // #endif
              //ios手机直接打开文件,手动存储文件到手机,Android手机从根目录创建文件夹,保存文件并改名
              setTimeout(() => {
                //打开文档查看
                uni.openDocument({
                  filePath: saveRes.savedFilePath,
                  success: function (ress) {
                    console.log("成功打开文件");
                  },
                  fail() {
                    console.log("打开文件失败");
                  }
                });
              }, 1000);
            },
            fail: (err) => {
              uni.$showMsg("保存失败");
              console.error("保存文件失败:", err);
            }
          });
        } else {
          uni.$showMsg("下载失败");
          console.error("下载文件失败,状态码:", res.statusCode);
        }
      },
      fail: (err) => {
        uni.$showMsg("下载失败");
        console.error("下载文件失败:", err);
      },
      complete: () => {
        // 下载完成后的操作,无论成功或失败
      }
    });
  },