js下载文件的方法（H5、PC）（小程序）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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. 授权保存到相册文章来源地址https://www.toymoban.com/news/detail-503163.html

  // 授权下载
  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: '下载完成',
                })
              }
            }
          })
        }
      }
    })
  },

到了这里，关于js下载文件的方法（H5、PC）（小程序）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！