홈>
최근에 Ionic 4 Angular 앱을 웹 앱 및 기본 Android 앱으로 게시했습니다.
기본 Android 앱에서 다운로드 한 파일 저장을 제외한 모든 것이 제대로 작동합니다.
파일을 다운로드하고 저장하려면 항상
file-saver
를 사용했습니다
npm 패키지는 다음과 같습니다 (이것은 PDF에서 이미지 등으로 무언가를 다운로드해야 할 때마다 호출되는 공유 서비스입니다).
import { saveAs } from 'file-saver';
// ...
saveGenericFile(api: string, fileinfos: any, idFile: string): any {
let mediaType = 'application/pdf';
let fileName = '';
if (fileinfos != null) {
mediaType = fileinfos.contentType;
fileName = fileinfos.fileName;
}
const headers = this.base.commonHeader;
const url = this.baseUrl + api + '?id=' + idFile;
this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
(response) => {
// tslint:disable-next-line: prefer-const
let blob = new Blob([response], { type: mediaType });
saveAs(blob, fileName);
}, e => {
console.error(e);
this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
}, () => {
/* do nothing */
}
);
}
위에서 언급했듯이이 코드 스 니펫은 정상적으로 작동하지만 웹 릴리스에서 무언가를 저장해야 할 때만 가능합니다.
내가 찾은 유일한 온라인 예는 Cordova 및/또는 이전/더 이상 사용되지 않는 버전에 관한 것입니다.
커패시터에 대해 이 문서 를 찾았습니다. 이 코드 스 니펫 :
import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';
const { Filesystem } = Plugins;
fileWrite() {
try {
Filesystem.writeFile({
path: 'secrets/text.txt',
data: "This is a test",
directory: FilesystemDirectory.Documents,
encoding: FilesystemEncoding.UTF8
});
} catch(e) {
console.error('Unable to write file', e);
}
}
그러나 문제는 위의 함수가 블롭을 반환 하고이 문자열은 데이터 문자열 만 허용한다는 것입니다.
웹앱으로 실행할 때와 Android 기본 앱으로 실행할 때 Blob 파일을 다운로드하고 저장하는 데 사용할 수있는 Capacitor-Native 동등한 기능이 있습니까?
<시간>업데이트
또한 다음을 시도했지만 작동하지 않습니다.
saveGenericFile(api: string, fileinfos: any, gidFile: string): any {
let mediaType = 'application/pdf';
let fileName = '';
if (fileinfos != null) {
mediaType = fileinfos.contentType;
fileName = fileinfos.fileName;
}
const headers = this.base.commonHeader;
const url = this.baseUrl + api + '?id=' + gidFile;
this.http.post(url, null, { headers, responseType: 'blob' }).subscribe(
(response) => {
if (!this.useCordovaDl) {
// tslint:disable-next-line: prefer-const
let blob = new Blob([response], { type: mediaType });
saveAs(blob, fileName);
} else {
this.blobFileWrite(fileName, response);
}
}, e => {
console.error(e);
this.toastsvc.generateToast('ERROR! An error occurred while saving this File, try later or contact support', 'danger');
}, () => {
/* do nothing */
}
);
}
blobFileWrite(filename: string, blobfile: Blob) {
const reader = new FileReader();
// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e: any) => {
const text = e.srcElement.result;
this.fileWrite(filename, text);
});
// Start reading the blob as text.
reader.readAsText(blobfile);
}
fileWrite(filename: string, filedata: string) {
try {
Filesystem.writeFile({
path: filename,
data: filedata
// ,
// directory: FilesystemDirectory.Documents,
// encoding: FilesystemEncoding.UTF8
});
} catch (e) {
console.error('Unable to write file', e);
}
}
<시간>
업데이트 # 2
Blob 저장에 관한 GitHub에 아직 공개 된 문제가 있습니다 커패시터로 데이터. 그 사이에 Cordova 솔루션을 찾을 것입니다. 또는 플랫폼이 android 또는 ios 인 경우 모든 다운로드 버튼을 비활성화합니다.
가능한 모든 Cordova 해결 방법을 여기에 게시합니다. 찾을 수있는 경우
관련 질문
- forms : 로그인을 클릭하면 ionic 4로 제출해야합니다.
- 클릭 이벤트가 첫 번째 슬라이드 이온 슬라이드에서 실행되지 않습니다.
- angular - 다른 클래스 범위의 각도 Singleton 서비스 함수에 액세스
- node.js - ionic 프레임 워크 웹 사이트의 지침에 따라 npm 및 ionic을 방금 설치했으며 새 프로젝트를 시작하자마자 이러한 오류가 발생합니다.
- UNAUTHORIZED_PAYMENT Ionic 4, http statusCode : 401로 요청 실패, 예외 :, 시스템 오류
- iOS 장치에서 키보드를 사용하여 입력 할 때 Ionic 4 양식 입력이 멈춤
- 이온 토스트 닫기 버튼을 사용자 정의 할 수 있습니까?
- ionic 5에서 빈 어레이를 확인하는 방법
- Ionic WifiWizard2가 Android 10에서 작동하지 않음
- 키값 파이프로 Typescript 유형 검사
URL을 전달할 수있는 플러그인을 만들면 기본적으로 다운로드됩니다. 이미 blob/file 전달이 불가능하다는 것을 알았습니다.
사용 가능한 플러그인이 없거나 생성하지 않으려는 경우.
js
에서 기본 기능을 호출 할 수 있습니다native
에서들을 수있는 URL 등의 측면