js下载文件的方法(H5、PC)(小程序)
一、H5,PC当后端返回的资源是链接时,此时可以使用 a 标签或者 window.location.href直接打开。1、a 标签形式在H5中,a标签新增了download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接。<a href="https://example.com" download="example.html">下载</a>
·
一、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: '下载完成',
})
}
}
})
}
}
})
},
更多推荐
已为社区贡献3条内容
所有评论(0)