如何在页面刷新/导航时保持Syncfusion PDFViewer中已渲染的PDF

我在Angular中使用Syncfusion PDFViewer控件，希望页面刷新、切换标签页或跳转到其他页面再返回时，已渲染的文档能保留在控件中，维持初始加载后的状态。但目前返回含PDF的页面时，控件会重新加载并渲染PDF。我已尝试设置enablePersistence = true、指定初始渲染页面等方案，均未解决问题。

HTML 代码 #

PDFViewer 部分 #

<div id="Preview">
    <ejs-pdfviewer id="pdfViewer" [serviceUrl]='hostedUrl' [documentPath]='localBase64Url' [initialRenderPages]='initialRender'  style="height:800px;display:block"></ejs-pdfviewer>
</div>

标签页部分 #

<li [ngbNavItem]="2"   [disabled]="!docsTabDisabled" (click)="OnStorePDFState()">
    <a ngbNavLink>
        <i class="la la-info-circle" ></i> Source Document
    </a>
    <ng-template ngbNavContent>
        <ng-template [ngTemplateOutlet]="SourceDocumentTab"></ng-template>
    </ng-template>
</li>

TypeScript 代码 #

localBase64Url = 'data:application/pdf;base64,' + data.file;
public hostedUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'

constructor(){
    this.route.params.subscribe((p) => {this.getFile();}
}

public getFile(this.fileId){
  this.testService.getUrl(`get-file/${this.fileId}`)
     .subscribe((data) => {
       this.test = data.test;
        
       if (data.file) {
         const base64Url = 'data:application/pdf;base64,' + data.file;
         this.localBase64Url = 'data:application/pdf;base64,' + data.file;
         //window.localStorage()
         this.storageService.saveCurrentTestPreview(base64Url); 
         console.log(base64Url); 
         this.pdfViewer.isDestroyed = false; 
         //this.pdfViewer.ngOnDestroy
         this.pdfViewer.dataBind(); 
             if(!this.localBase64Url){
              console.log("not loading from local")
             this.pdfViewer.load(base64Url, '');
             }
        this.pdfViewer.enablePersistence = true;
        this.pdfViewer.getLocalData(); 
        viewer.detachUnloadEvent(); 
        }
    }
}

public OnStorePDFState(){
  
    if(!this.docsTabDisabled)return; 
    this.pdfViewer.getPersistData(); 
    this.pdfViewer.getLocalData();
    const viewer = this.pdfViewer.documentLoad({
      enableToolbar: false,
      enableNavigationToolbar: false,
      documentPath:this.localBase64Url,
      serviceUrl: this.hostedUrl,
       }); 
      viewer.appendTo('#pdfviewer');
      viewer.enablePersistence = true, 
      viewer.getPersistData(); 
      viewer.getLocalData(); 
      viewer.detachUnloadEvent(); 
 }

解决方案 #

1. 正确设置enablePersistence属性 #

enablePersistence需要在控件初始化时就配置，直接在HTML模板中绑定，而非文件加载后再设置：

<ejs-pdfviewer id="pdfViewer" 
               [serviceUrl]='hostedUrl' 
               [documentPath]='localBase64Url' 
               [initialRenderPages]='initialRender' 
               [enablePersistence]="true"
               style="height:800px;display:block">
</ejs-pdfviewer>

2. 避免重复创建PDFViewer实例 #

OnStorePDFState方法中重复创建viewer实例会覆盖原有实例，导致状态丢失，直接复用已有的实例即可：

public OnStorePDFState(){
    if(!this.docsTabDisabled)return; 
    // 仅保存当前状态，无需重建实例
    this.pdfViewer.getPersistData();
}

3. 缓存组件状态（路由跳转场景） #

如果是路由跳转导致组件销毁重建，可通过两种方式处理：

• 实现RouteReuseStrategy缓存组件实例，避免组件被销毁；
• 在组件生命周期中手动保存/恢复状态：

ngOnDestroy() {
    const persistData = this.pdfViewer.getPersistData();
    this.storageService.savePDFState(persistData);
}

ngOnInit() {
    const savedState = this.storageService.getPDFState();
    if(savedState && this.pdfViewer) {
        this.pdfViewer.setPersistData(savedState);
    }
}

4. 修正getFile方法逻辑 #

• 不要手动修改内部属性isDestroyed，避免控件异常；
• 依赖Angular变更检测自动更新，无需手动调用dataBind：

public getFile(fileId){
  this.testService.getUrl(`get-file/${fileId}`)
     .subscribe((data) => {
       this.test = data.test;
        
       if (data.file) {
         const base64Url = 'data:application/pdf;base64,' + data.file;
         this.localBase64Url = base64Url;
         this.storageService.saveCurrentTestPreview(base64Url); 
         
         if(!this.localBase64Url){
             console.log("not loading from local")
             this.pdfViewer.load(base64Url, '');
         }
       }
    });
}

5. 移除detachUnloadEvent调用 #

该方法会阻止控件在页面卸载时保存状态，直接删除相关代码即可。

内容的提问来源于stack exchange，提问作者Zidane