Question

我遇到一种情况，我向API发送参数，而API又会生成动态pdf，而API向我发送新生成文件的路径。当我在浏览器中打开文件时，它显示新生成的文件，但在我的DOM我仍然看到旧的文件，直到＆除非我关闭浏览器和再次击中了API。我正在预览生成的pdf文件，如下所示：

TS部分：

this.http.postMethod("report/auditAdmin", data).subscribe((res: any) => {
        this.toolbar = "#toolbar=0&navpanes=0";
        this.pdfSrc = res.filepath + this.toolbar;
        this.Url = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
      });

HTML部分：

<object [data]="Url" type="application/pdf" width="100%" height="1000px"></object>

Answer 1

问题不是与API缓存或Angular有关，而是与对象控件有关。当我们尝试加载pdf文件或其他任何外部内容对象之类的数据时，会发送获取请求来显示内容（获取请求可以在浏览器的“网络”标签中查看）。

因此，简单的解决方案是将querystring附加到您的pdf路径。

this.http.postMethod("report/auditAdmin", data).subscribe((res: any) => {
            this.toolbar = "#toolbar=0&navpanes=0";
            let ramdom = Math.random();
            this.pdfSrc = res.filepath + "?v=" + random + this.toolbar;
            this.Url = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
          });

现在，只要您的对象尝试向pdf文件发出get请求，由于查询字符串的存在，每个请求都将是新的，因此不会从缓存中加载数据。

Answer 2

要防止/避免Angular 2+版本中的缓存，您可以通过重写RequestOptions来实现。

第1步：创建自定义RequestOptions。

import { Injectable } from '@angular/core';
import { BaseRequestOptions, Headers } from '@angular/http';
@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    headers = new Headers({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
    });
}

步骤2 在根AppModule.ts中提供

@NgModule({
    ...
    providers: [
        ...
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ]
})

希望以上解决方案都能解决您的问题！

如何防止或避免缓存角2 +应用程序？

2 个答案: