我想在我的Ionic Hybrid App.in native app的通知栏中显示下载进度。我正在使用cordova file transfer插件下载文件。
Ionic App有可能吗?我怎么能这样做?
像这样:
答案 0 :(得分:0)
以下解决方案采用 Ionic-Angular - 它展示了如何使用文件传输将数据下载到 dataDirectory 并显示下载进度通知。
data-directory-manager.service.ts:
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file/ngx';
import { NotificationService } from './notification.service';
@Injectable({
providedIn: 'root'
})
export class DataDirectoryManagerService {
constructor(
private file:File,
private transfer:FileTransfer,
private notificationService :NotificationService
){}
fileTransferProgressBar()
{
this.fileTransfer.onProgress((progressEvent) => {
var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
this.notificationService.updateNotificationProgress(1,perc,"downloaded "+ perc + " %");
console.log(" Downloaded File progress = "+ perc + " %");
if(perc==100)
{
//remove notification after download completed
this.notificationService.cancelNotification(1);
}
});
}
downloader(url, fileName)
{
this.notificationService.sendNotification(1,"downloading "+ fileName, "some text", 0);
this.fileTransfer.download(url, this.file.dataDirectory + fileName).then((entry) => {
console.log('download complete: ' + entry.toURL());
console.log("Completed download for => " + fileName);
}, (error) => {
// handle error
console.log(error);
});
}
}
我的通知服务: notification.service.ts
import { LocalNotifications} from '@ionic-native/local-notifications/ngx';
@Injectable({
providedIn: 'root'
})
export class NotificationService {
constructor(private localNotifications:LocalNotifications) { }
async sendNotification(id, title, text, value) {
await this.localNotifications.schedule({
id: id,
title: title,
text: text,
progressBar: {
value: value,
},
sticky: true,
});
}
async updateNotificationProgress(id:number, progressValue:number, text:string)
{
await this.localNotifications.update({
id:id,
progressBar:{value:progressValue},
text:text
});
}
async cancelNotification(id:number)
{
await this.localNotifications.cancel(id);
}
}
详细解释请参考以下链接:
答案 1 :(得分:-1)
使用cordovaToast插件获取此功能。这是显示pdf下载进度的示例
<强> HTML 强>
<ion-view >
<div class="bar bar-subheader bar-positive" style="padding:0px;height: 8px;" >
<progress id="progressbar" max="100" value="{{ downloadProgress }}" class="progress"> </progress>
</div>
<ion-content>
</ion-content>
</ion-view>
<强> CSS 强>
.progress {
margin: 0 px;
height: 8 px;
background - color: #F1292B!important;
border - radius: 2 px;
box - shadow: 0 2 px 5 px rgba(0, 0, 0, 0.25) inset;
}
<强> JS 强>
if (window.cordova) {
var url = '{{base_url}}/pdf_download/' + id;
// Android
var targetPath = 'file:///storage/sdcard0/' + 'fpl_' + id + '.pdf';
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
$cordovaToast
.show('File downloaded successfully..', 'short', 'center')
.then(function() {
// success
}, function() {
// error
});
console.log(result);
}, function() {
var alertPopup = $ionicPopup.alert({
title: 'No internet access',
buttons: [{
text: 'OK',
type: 'button-assertive'
}]
});
alertPopup.then(function() {});
}, function(progress) {
var dnldpgs = progress.loaded.toString().substring(0, 2);
$scope.downloadProgress = parseInt(dnldpgs);
});
}
如果您有任何疑问,请告诉我。谢谢。