Recently, the company required the use of Vue to develop mobile terminals and app terminals, and there were many pitfalls! I don’t understand why uniapp is not used, I’m so angry!
Now let’s talk about one of the needs that has troubled me for the longest time is downloading files. If you know how to do it, the rest is not difficult.
Download files on the app
First attach the official document: https://www.html5plus.org/doc/zh_cn/downloader.html
What we are going to use is the plus.downloader module in H5+ to manage network file download tasks.
From the usage method, I divide it into three parts, namely direct access to the resource address and request through the back-end interface (divided into get and post)
Create a new download task API
plus.downloader.createDownload(url, options, completedCB);
Configuration of options parameters
Please see the official documentation for specific details. Below we will directly talk about how to use it in development.
1. Access resource address
Simple and crude, just paste the code directly
//资源地址
let picurl = `http://baidu.com/aa.png`
// 参数
let data = {
//自定义下载文件路径
filename: "file://storage/emulated/0/yingjitong/aa.png",
//默认为GET请求。注意这里需大写“GET”、“POST”
method: 'GET',
}
let dtask = plus.downloader.createDownload( picurl, data, (d, status)=>{
// 下载完成
if (status == 200) {
this.$toast( '导出成功' );
// 将本地URL路径转换成平台绝对路径
plus.io.convertLocalFileSystemURL(d.filename);
} else {
dtask.clear(); //清除下载任务
this.$toast( '导出失败' );
}
}
);
// 开始下载
dtask.start();
2. Request through interface
get request
//后端接口
let picurl = `http://xxx/api/downloadFile`
//get请求的参数需要拼接在接口后端,`http://xxx/api/downloadFile?name='123'`
// 参数
let data = {
//自定义下载文件路径
filename: "file://storage/emulated/0/yingjitong/aa.png",
//默认为GET请求。注意这里需大写“GET”、“POST”
method: 'GET',
}
let dtask = plus.downloader.createDownload( picurl, data, (d, status)=>{
// 下载完成
if (status == 200) {
this.$toast( '导出成功' );
// 将本地URL路径转换成平台绝对路径
plus.io.convertLocalFileSystemURL(d.filename);
} else {
dtask.clear(); //清除下载任务
this.$toast( '导出失败' );
}
}
);
// 开始下载
dtask.start();
Post request, the method of passing parameters is different from that of get request, so request headers need to be added.
// 后端接口
let picurl = `${
httpUrl}/event/api/sjjbjbsj/exportSjjbjbsj`
let data = {
// 参数
data:params,
filename: "file://storage/emulated/0/yingjitong/突发事件统计表.xls",
//post必须大写
method: 'POST',
}
let dtask = plus.downloader.createDownload( picurl, data, (d, status)=>{
this.exportActive = true
// 下载完成
if (status == 200) {
this.$toast( '导出成功' );
// 将本地URL路径转换成平台绝对路径
plus.io.convertLocalFileSystemURL(d.filename);
} else {
dtask.clear(); //清除下载任务
this.$toast( '导出失败' );
}
}
);
// post请求需要添加请求头
dtask.setRequestHeader( "Content-Type", "application/json" );
// 开始下载
dtask.start();
There are other configurations for the parameters in plus.downloader.createDownload. If necessary, you can read the official documentation.