Предварительный просмотр перед загрузкой с угловым 4 в модальном режиме с использованием embed или iframe

Question

У меня были проблемы с этим кодом из-за всплывающих окон:

@component
public visualizarArquivo(file): void {
    var url = window.URL.createObjectURL(file);
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.click();
}


@html
<div class="col-md-6">
    <fieldset class="form-group">
        <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
        <input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png (change)="onFileChange($event)">
    </fieldset>

    <button id="view" type="button" class="btn btn" (click)="openPhoto(contentPhoto)">
        <span class="fa fa-eye"></span>
    </button>
</div>

Теперь мне нужно открыть этот файл в модальном режиме, как я могу использовать iframe или embed?

Answer 1

Ваш код будет выглядеть примерно так, если вы предпочитаете использовать один из этих двух подходов -

Подход 1 : ng2-pdf-viewer с Код предварительного просмотра этого изображения -

<div class="col-md-6">
    <fieldset class="form-group">
        <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
        <input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png" (change)="showPreview($event)">
    </fieldset>
</div>

<div class="col-md-6">
    <img [src]="localUrl" *ngIf="localUrl && isImg" class="imgPlaceholder">
    <pdf-viewer [src]="localUrl" *ngIf="localUrl && isPdf" [render-text]="true" style="display: block;"></pdf-viewer>
</div>


export class AppComponent {          // or your component
    localUrl: any[];
    isImage = false;
    isPdf = false;
    constructor() { }
    showPreview(event: any) {
        if (event.target.files && event.target.files[0]) {
            if(event.target.files[0].type == "application/pdf") {
                isImage = true;
                isPdf = false;      // required, going forward
            }
            else {
                isPdf = true;
                isImage = false;    // required, going forward
            }
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    }
}

Подход 2 : Использование IFrame

<input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png" (change)="showPreview($event)">
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" [src]="localUrl"></iframe>
</div>

export class AppComponent {          // or your component
    localUrl: any[];
    constructor() { }
    showPreview(event: any) {
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
        }
    }
}

Тогда вы можете показать его в модальном режиме!Просто для базового понимания я показал это в div