Ionic 5 文件开启器问题是找不到文件
Ionic 5 File opener Issue is file not found
我将 Ionic 与 angular 一起使用并制作了一个应用程序。在我的应用程序中,我使用 couch DB 下载图像。
我正在使用 Android Phone.
我正在尝试借助文件打开器下载我的文件,我得到了 ->
(Status:9 message:file not found)
<ion-item mode=md class="input-group ion-no-padding viewFile" lines=none *ngIf="common.isDocumentFill">
<span (click)="doc(fc)">View File</span>
</ion-item>
//函数
doc(objFC) {
let obj = {
ServiceId: 1,
CouchDBDocId: objFC.CouchDBDocId,
DocumentName: objFC.FileName
}
this.api.getPdf(obj).subscribe((data: any) => {
// debugger
let blob = new Blob([data], { type: data.type });
var downloadURL = window.URL.createObjectURL(data);
var types = data.type
this.down(downloadURL, types)
});
}
down(filepath, mimeType) {
this.fileOpener.open(filepath, mimeType)
.then(() =>
console.log('File is opened')
)
.catch(e => console.log('Error opening file', e));
}
和服务
getPdf(obj) {
// debugger
const httpOptions = {
responseType: 'blob' as 'json'
};
return this.http.post(this.url + "DocumentDetails/DownloadFile", obj, httpOptions);
}
尝试创造URL喜欢
var downloadURL = (window.webkitURL || window.URL).createObjectURL(data);
浏览器可能不支持 window.URL
-> read here
在谈论 phone 时,您指的是 iOS 设备还是 Android?
请安装所需插件
1.import { FileOpener } from '@ionic-native/file-opener/ngx';
2.import { File } from '@ionic-native/file/ngx';
在构造函数中创建实例
constructor(
private fileOpener: FileOpener,
private file: File
)
把这个函数放到你的ts文件里
openPDF (stringBase64PDF) {
debugger
fetch('data:application/pdf;base64,' + stringBase64PDF, {
method: "GET"
})
.then(res => res.blob()).then(blob => {
console.log("created blob");
this.file.createFile(this.file.dataDirectory, 'temp.pdf', true)
.then(() => {
console.log("file created");
this.file.writeFile(this.file.dataDirectory, 'temp.pdf', blob, { replace: true })
.then(res => {
console.log("file writed");
this.fileOpener.open(res.toInternalURL(), 'application/pdf')
.then((res) => {
console.log('file opened')
}).catch(err => {
console.log('open error')
});
}).catch(err => {
console.log('write error')
});
}).catch(() => {
console.log("create error");
})
}).catch(err => {
console.log('blob error')
});
}
放入html文件
<ion-item (click)="openPDF(base64pdf)">
<ion-label>Click here to open pdf file</ion-label>
</ion-item>
我将 Ionic 与 angular 一起使用并制作了一个应用程序。在我的应用程序中,我使用 couch DB 下载图像。
我正在使用 Android Phone.
我正在尝试借助文件打开器下载我的文件,我得到了 ->
(Status:9 message:file not found)
<ion-item mode=md class="input-group ion-no-padding viewFile" lines=none *ngIf="common.isDocumentFill">
<span (click)="doc(fc)">View File</span>
</ion-item>
//函数
doc(objFC) {
let obj = {
ServiceId: 1,
CouchDBDocId: objFC.CouchDBDocId,
DocumentName: objFC.FileName
}
this.api.getPdf(obj).subscribe((data: any) => {
// debugger
let blob = new Blob([data], { type: data.type });
var downloadURL = window.URL.createObjectURL(data);
var types = data.type
this.down(downloadURL, types)
});
}
down(filepath, mimeType) {
this.fileOpener.open(filepath, mimeType)
.then(() =>
console.log('File is opened')
)
.catch(e => console.log('Error opening file', e));
}
和服务
getPdf(obj) {
// debugger
const httpOptions = {
responseType: 'blob' as 'json'
};
return this.http.post(this.url + "DocumentDetails/DownloadFile", obj, httpOptions);
}
尝试创造URL喜欢
var downloadURL = (window.webkitURL || window.URL).createObjectURL(data);
浏览器可能不支持 window.URL
-> read here
在谈论 phone 时,您指的是 iOS 设备还是 Android?
请安装所需插件
1.import { FileOpener } from '@ionic-native/file-opener/ngx';
2.import { File } from '@ionic-native/file/ngx';
在构造函数中创建实例
constructor(
private fileOpener: FileOpener,
private file: File
)
把这个函数放到你的ts文件里
openPDF (stringBase64PDF) {
debugger
fetch('data:application/pdf;base64,' + stringBase64PDF, {
method: "GET"
})
.then(res => res.blob()).then(blob => {
console.log("created blob");
this.file.createFile(this.file.dataDirectory, 'temp.pdf', true)
.then(() => {
console.log("file created");
this.file.writeFile(this.file.dataDirectory, 'temp.pdf', blob, { replace: true })
.then(res => {
console.log("file writed");
this.fileOpener.open(res.toInternalURL(), 'application/pdf')
.then((res) => {
console.log('file opened')
}).catch(err => {
console.log('open error')
});
}).catch(err => {
console.log('write error')
});
}).catch(() => {
console.log("create error");
})
}).catch(err => {
console.log('blob error')
});
}
放入html文件
<ion-item (click)="openPDF(base64pdf)">
<ion-label>Click here to open pdf file</ion-label>
</ion-item>