2017-12-29 74 views
1

ionst 2/3の画像で行うか、ローカルでオフラインで保存するかのように、localstorageにウェブページを置くことが可能かどうか疑問に思っていました。ここではGoogleドキュメントを使用してリモートブックにアクセスするための私が持っているコードです:オフラインで閲覧するためのウェブページをイオン化して保存する3

book.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser'; 

import { Storage } from '@ionic/storage'; 

@IonicPage() 
@Component({ 
    selector: 'page-view-book', 
    templateUrl: 'view-book.html', 
}) 
export class ViewBookPage { 
    book: any; 
    pdfUrl: SafeResourceUrl; 

    constructor(private domSanitizer: DomSanitizer, 
       public navCtrl: NavController, 
       public navParams: NavParams) { 

    this.book = navParams.data.book; 
    // get url of pdf and embed in iframe from google docs 
    this.pdfUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
     'http://docs.google.com/gview?url='+this.book+'&embedded=true'); 

    } 

book.html

<ion-header> 

    <ion-navbar> 
    <ion-title>View book</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content padding> 

<iframe width="100%" height="100%" [src]="pdfUrl" frameborder="0" allowfullscreen> 
</iframe> 


</ion-content> 

は今、私は必要なものにできるようにすることです最初に読み込んだ後、ウェブページをオフラインで表示することができます(おそらくiframe内)。ありがとう

答えて

0

私は非常にあなたがIonic cache serviceを使用することをお勧めします。

ほぼすべてをキャッシュできるイオンキャッシュサービス。これは、 リクエスト、オブザーバブル、約束事、古典的なデータをキャッシュします。これは、 ストレージを使用していますので、 オーダーでIndexedDB、SQLite(Cordova)、WebSQLをサポートしています。角度2のアプリケーションでは別途使用できます。

npm install ionic-cache @ionic/storage --save 

グレートvideo and article from Simon

+0

APIのみで動作するようです。それはWebページのために働くでしょうか? –

+0

データをキャッシュし、既存のページ番号を使用してデータを表示することができます。ここでは 'HTML 'をキャッシュするユースケースはありません。とにかく最初にHTMLを取得した場合、それはキャッシュに格納されているためです。したがって、データをキャッシュするだけで済みます。 – Sampath

+0

Eish私はあなたを得ているかわからない。私は上記のプラグインを試しました。 Webページでは機能しません –

関連する問題