时间戳

首页 > 解决方案 > 如何在从 URL 将数据（pdf）加载到 HTML 对象元素中时显示微调器或进度

html - 如何在从 URL 将数据（pdf）加载到 HTML 对象元素中时显示微调器或进度

问题描述

我正在 Angular/HTML 的 Object 元素中加载 PDF，我想在加载数据时显示 Spinner 或 Loader 或 Object 元素的进度

<object  [attr.data]="protectedUrl" type="application/pdf" style="width: 100%; height: 400px;"></object>

标签： htmlcssangular

解决方案

将其包装成 a 然后创建 isLoaded var，这将在从 url 获取加载数据后为真。

getPdfDataFromUrl(clientId){
setTimeout(() => {
            this.isLoaded=true;
        }, 3000);
let protectedUrl = this.sanitizer.bypassSecurityTrustResourceUrl('xxxxxx'+clientId);
}
<ng-container *ngIf="isLoaded">
<object  [attr.data]="protectedUrl" type="application/pdf" style="width: 100%; height: 400px;"></object>
<ng-container>

这将仅在 pdf 可用时显示您的对象。

推荐阅读