js下载文件的方法(H5、PC)(小程序)

一、H5,PC

当后端返回的资源是链接时,此时可以使用 a 标签或者 window.location.href直接打开下载。

1、a 标签形式

利用a标签download 属性,当a标签被点击时,浏览器会以下载文件方式下载 href 属性上的链接。

// 需要点击下载 href:资源地址, downlod:下载后的文件名称
<a href="https://example.com" download="example.html">下载</a>
 
// 封装方法-直接调用即可 href:资源地址, title:下载后的文件名称
function download(href, title) {
    const a = document.createElement('a');
    a.setAttribute('href', href);
    a.setAttribute('download', title);
    a.click();
}
download('https://example.com', 'test')

2、window.location.href 直接打开下载

window.location.href === 'https://example.com'

3、后端返的文件流下载

function download(file) => {
  const blob = new Blob([file]);
  const elink: any = document.createElement("a"); //创建a标签节点
  elink.download = "download.xlsx"; //下载出来的名字(带后缀)
  elink.style.display = "none"; //隐藏标签
  elink.href = window.URL.createObjectURL(blob); //创建好的url放入a标签href中
  document.body.appendChild(elink); //追加到body中
  elink.click(); //执行a标签的点击
  window.URL.revokeObjectURL(elink.href); //浏览器打开excel文件
};

二、小程序下载方法

1. 下载到临时文件可预览(没有保存到相册)

  // 点击下载视频
  onVideo() {
    wx.downloadFile({
      url: 'https://example.com', // 文件的线上地址
      success: function (res) { //下载成功是临时文件
        console.log(res)
        wx.getFileSystemManager().saveFile({ //需要保存在本地
          tempFilePath: res.tempFilePath,
          success: function (res) { //成功返回本地缓存路径
            const save = res.savedFilePath
            console.log(save)
            wx.openDocument({ //一般采用这个打开 但是不支持txt所以我换了一种
              filePath: save,
              success: function (res) {
                console.log("打开成功") //doc, xls, ppt, pdf, docx, xlsx, pptx需要有相对应的软件,自动打开对应软件显示比如docx打开word
              }
            })
          }
        })
      }
    })
  },

2. 授权保存到相册

  // 授权下载
  downloadAlbum() {
    var that = this;
    // 下载链接的地址
    var link = 'https://example.com'; // 文件的线上地址
    // 获取用户授权
    wx.getSetting({
      success(res) {
        // 如果已授权
        if (res.authSetting['scope.writePhotosAlbum']) {
          that.saveAlbum(link);
          // 如果没有授权 
        } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
          // 调起用户授权
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.saveAlbum(link);
            },
            fail() {
              wx.showToast({
                title: '您没有授权,无法保存到相册',
                icon: 'none'
              })
            }
          })
          // 如果之前授权已拒绝
        } else {
          wx.openSetting({
            success(res) {
              if (res.authSetting['scope.writePhotosAlbum']) {
                that.saveAlbum(link);
              } else {
                wx.showToast({
                  title: '您没有授权,无法保存到相册',
                  icon: 'none'
                })
              }
            }
          })
        }
      }
    })

  },

  // 保存影集
  saveAlbum(link) {
    wx.downloadFile({
      url: link,
      success(res) {
        if (res.statusCode === 200) {
          var path = res.tempFilePath
          wx.saveVideoToPhotosAlbum({
            filePath: path,
            success(res) {
              if (res.errMsg == 'saveVideoToPhotosAlbum:ok') {
                wx.showToast({
                  title: '下载完成',
                })
              }
            }
          })
        }
      }
    })
  },

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
知识付费系统源码是一种用于构建知识付费平台的代码资源。根据需求,可以开发适用于不同端的系统,如PC小程序H5和APP。 知识付费系统源码的开发涉及多个方面,主要包括后端和前端。后端负责处理数据和业务逻辑,提供给前端进行展示和操作。前端则负责用户界面的展示和用户交互。 在知识付费系统中,可以实现以下功能:用户注册和登录、知识内容的购买和浏览、支付功能、个人信息管理、评论和评价等。系统可以提供多种支付方式,如微信支付、支付宝等,以方便用户的购买和付款。 对于PC端,可以使用Java、Python等后端语言和HTML、CSS、JavaScript前端语言进行开发。可以利用框架和工具来简化开发过程,并提高系统的性能和稳定性。 对于小程序端,可以使用微信小程序开发框架进行开发。小程序具有轻量级、快速部署和跨平台的特点,用户可以通过微信扫描二维码进行访问和使用。 对于H5端和APP端,可以使用前端框架和移动应用开发框架进行开发。H5端可以在浏览器中进行访问,而APP端可以在移动设备上下载安装使用。 总之,知识付费系统源码是一种用于构建知识付费平台的代码资源,可以根据需求选择适合自己的开发端,并利用相应的技术进行开发。通过源码的使用,可以快速搭建一套完善的知识付费系统,为用户提供高品质的知识内容和付费服务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值