如何在页面刷新或导航时将渲染的 pdf 文件保留在syncfusion pdfViewer 中

Question

我正在使用带有角度的同步融合 pdfViewer 控件。我希望即使我离开或刷新页面，渲染的文档也能保留在控件中。当我浏览选项卡或当我离开时 到另一页并返回 pdf 页面我仍然想以最初加载的方式查看它。目前，当我导航时，控件会重新加载并重新渲染 pdf 返回有 pdf 的页面。

到目前为止我已经尝试过enablePersistence = true，用N个渲染渲染3个初始页面

HTML

PDF查看器

   <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>

打字稿

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(); 
 }

Answer 1

在提供的示例中，加载文档后，会触发“documentLoad”事件。通过利用此事件，我们使用“savsAsBlob”方法获取文档的 base64 并将其存储在本地存储中。刷新或导航后，返回 PDF 查看器后，我们从本地存储中检索 base64 字符串，并将其加载到“创建”事件中的 PDFViewer 中。

代码片段：

 documentLoad(args){
   var data;
   var base64data;
   var viewer = (<any>document.getElementById('pdfViewer'))
     .ej2_instances[0];
   setTimeout(()=>{
     // Get the base64 of the loaded document
     viewer.saveAsBlob().then(function (value) {
         data = value;
         var reader = new FileReader();
         reader.readAsDataURL(data);
         reader.onload = () => { 
             base64data = reader.result; 
             console.log(base64data);
             localStorage.setItem("CurrentDoc", base64data); 
         };
     })
   }, 1000)
 }

 created(){
   console.log("called");
   var viewer = (<any>document.getElementById('pdfViewer'))
   .ej2_instances[0];
   var currentDoc = localStorage.getItem("CurrentDoc");
   if(currentDoc){
     // loaded document from local storage
     viewer.load(currentDoc);  
   } 
 }

示例：刷新页面后保留最近加载的 PDF 文档

此示例在刷新页面或从其他页面返回时重新加载 PDF 查看器中最近打开的文档。然而，保留之前的查看状态或正在查看的特定页面是不可行的；只能保留最后加载的文档。