[工具(前端)] uniapp(H5)中文件改名下载

在uniapp(H5)中使用下载功能, uni.downloadFile()时,获取到的是本地的缓存的文件,文章介绍如果将本地缓存文件下载并改名。

1. uni.downloadFile() 不能触发浏览器的自动下载

uniapp 的downloadFile只能获取到本地的缓存文件并不能触发浏览器的自动下载

let url = ""; //文件url
uni.downloadFile({
    url: url ,
    header:{
        'Authorization':this.$utils.localData.getToken(), //可以设置相关头信息
    },
    success: (res) => {
        if (res.statusCode === 200) {
            //res.tempFilePath; //此参数为本地的缓存地址
            //..
        }
    },
    fail:(e)=>{
        uni.showToast({
            title:'数据处理错误,请刷新重试',
            icon: 'none',
            duration: 2000
        });
    }
})
2. 利用 a 标签进行浏览器的文件的改名并下载
var link = document.createElement('a');
link.href = url; //url 为获取的本地缓存地址或者直接是url地址
link.download =name+'.file'; //name为自定义的文件名称  .file为文件后缀名
document.body.appendChild(link)
link.click()
//移除
setTimeout(() => document.body.removeChild(link), 1000)

a 标签的下载是web端通用的操作,需要修改名只要添加download 属性即可,uniapp(H5)也可以通用

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐