javascript - 使用嵌入或 iframe 在模态中使用 Angular 4 上传前预览

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 或嵌入？

Answer 1

如果您更喜欢使用这两种方法中的一种，您的代码将是这样的-

方法 1:ng2-pdf-viewer与 this image preview code -

<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

中展示了它