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'

二、小程序下载方法

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.savedFilePathconsole.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.tempFilePathwx.saveVideoToPhotosAlbum({filePath: path,success(res) {if (res.errMsg == 'saveVideoToPhotosAlbum:ok') {wx.showToast({title: '下载完成',})}}})}}})},

js下载文件的方法（H5、PC）（小程序）相关推荐

两种 js下载文件的方法(转)
2019独角兽企业重金招聘Python工程师标准>>> 两种 js下载文件的方法(转) functionDownURL(strRemoteURL, strLocalURL){try{ ...
爬虫(21)crawlspider讲解古诗文案例补充+小程序社区案例+汽车之家案例+scrapy内置的下载文件的方法
文章目录第十九章 crawlspider讲解 1. 古诗文案例crawlspider 1.1 需求 1.2 处理 1.3 解析 2. 小程序社区案例 2.1 创建项目 2.2 项目配置 2.3 解析 ...
js下载文件方法记录
js下载文件方法记录 downLoadExcel() { this.downloading = true axios.get(/xxxx, { responseType: 'blob', params ...
yii2 asset.php,Yii2中使用asset压缩js,css文件的方法_php实例
官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets. ...
linux ftp 查找文件,Linux shell ftp命令根据文件日期下载文件的方法
需求:ftp获取远程数据的文件,根据文件的创建时间点下载文件. 可以自行扩展根据文件的大小等其他需求. 知识点总结: 1.获取文件的时间: ls -lrt|awk '{print $6" & ...
火狐使用js下载文件_如何使用Firefox Send安全地将大文件发送给任何人
火狐使用js下载文件 We may be living in the future, but sending large files over the web remains-complicated. ...
uni-app项目中H5跨域小程序不跨域怎么解决方法（兼容H5、小程序）
解决这个问题的时候还是用到了之前的文章中提到的"条件编译",当然这只是其中一部分, 下面我们来看一下这种问题的解决方法, ①H5端配置首先在项目中找到一个名为"mani ...
JS 下载文件两种方式总结
后端返回Blob对象(文件流),完成导出.下载功能: 1.介绍Blob Blob Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 Reada ...
合并多个js,css文件的方法：在服务端合并js和css文件
合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度. 通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文件夹里就有10几个文件,这样 ...

js下载文件的方法（H5、PC）（小程序）

一、H5，PC

二、小程序下载方法

js下载文件的方法（H5、PC）（小程序）相关推荐

最新文章

热门文章