We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Open Pdf viewer in a new tab

Hey there, Can I open the PDF viewer in a new tab on click of a hyperlink? The PDF should we visible only if I click the hyperlink

14 Replies

AA Akshaya Arivoli Syncfusion Team August 14, 2019 01:46 PM UTC

Hi Nabila, 

Thank you for contacting Support. 

We have created the sample as per your requirement and shared the same in the below link, 

Clicking on the hyperlink in above sample will open the PDF Viewer in new window. 

Please find the below link for loading the PDF document from blob storage URL, 

Please try this and revert us with more details about your requirement if you have any concerns. 

Regards, 
Akshaya 



CR Carlos Reche November 26, 2021 01:42 PM UTC

How do I use events?

600 



DM Dhivyabharathi Mohan Syncfusion Team November 29, 2021 09:56 AM UTC

Hi Carlos, 
 
 
We have shared the code snippet and sample to use the events in the Syncfusion PDF Viewer. Please refer the below code snippets and sample. 
 
 
Code snippet: 
 
<ejs-pdfviewer 
      id="pdfViewer" 
      [serviceUrl]="service" 
      [documentPath]="document" 
      (addSignature)="addSignature($event)" 
      (annotationAdd)="annotationAdd($event)" 
      (commentAdd)="commentAdd($event)" 
      (ajaxRequestfailed)="ajaxRequestFailed($event)" 
      (documentLoadFailed)="documentLoadFailed($event)" 
      style="height:640px;display:block" 
    ></ejs-pdfviewer> 
 
//Triggers while adding the signature 
addSignature(args) { 
    console.log("Signature is added”); 
  } 
 
//Triggers while adding the annotations 
  annotationAdd(args) { 
    console.log("annotationis added”); 
  } 
 
//Triggers while adding the comments 
  commentAdd(args) { 
    console.log("Comment is added”); 
  } 
 
//Triggers while ajax request gets failed 
  ajaxRequestFailed(args) { 
    console.log("Ajax request gets failed”); 
  } 
 
//Triggers while document load gets failed 
  documentLoadFailed(args) { 
    console.log(“Document load gets failed”); 
  } 
 
 
 
 
 
 
Kindly try this and revert us, if you have any concerns. 
 
 
Regards, 
Dhivya. 



CR Carlos Reche December 21, 2021 09:53 AM UTC

Our problem is that we need to instance two copies or more of the pdf viewer in the same browser tab, because our webapp has a tabbed interface, which allows users to open two documents in the same browser tab. Right now this is not possible, it seems that there is an internal state of the pdf viewer that does not allow it. Could you give me a solution?



DM Dhivyabharathi Mohan Syncfusion Team December 22, 2021 06:35 AM UTC

Hi Carlos, 
 
We have prepared the sample to open the PDF Viewer inside the tab component. Please refer the sample below for tab navigation. 
  
 
Kindly try this and revert us, if you have any concerns. 
 
Regards, 
Dhivya. 



CR Carlos Reche December 27, 2021 03:36 PM UTC

I have tried the solution you propose, I have generated a random id for the pdf viewer, but when I instantiate it for the first time I have this error. I use Angular 6 in case it helps you information.


Attachment: error_pdfviewer_ca94c2b1.7z


DM Dhivyabharathi Mohan Syncfusion Team December 28, 2021 12:03 PM UTC

Hi Carlos, 
 
We have tried to generate the random Id for the PDF Viewer component as in the below code snippet. But we were unable to replicate the reported script error. We have shared the sample and code snippet in which we tried to replicate the reported issue by generating the random Id for PDF Viewer. 
 
 
Code snippet: 
 
<ejs-pdfviewer 
                [id]="pdfViewerId" 
                #pdfviewer 
                [serviceUrl]="service" 
                [documentPath]="document" 
                (created)="created()" 
                style="height:640px;display:block" 
              ></ejs-pdfviewer> 
 
ngOnInit(): void { 
    // ngOnInit function 
    this.pdfViewerId = 'pdfViewer' + Math.floor(Math.random() * 10).toString(); 
  } 
  created() { 
    console.log('created', new Date()); 
    var viewer = (<any>document.getElementById(this.pdfViewerId)) 
      .ej2_instances[0]; 
    console.log(viewer); 
  } 
 
 
 
 
Could you please try with the provided sample and let us know whether you are facing the same issue with the provided sample. And kindly let us know in which way you are generating the random Id for the PDF Viewer and kindly share the code snippet which you have used on your end. These details will be helpful for us to investigate further and assist you better. 
 
 
Regards, 
Dhivya. 



CR Carlos Reche December 29, 2021 10:02 AM UTC

Thanks to your contribution I have been able to make the viewer work in two tabs simultaneously, but I have a style problem when opening a second instance.


Attachment: styles_7f17eb61.7z


DM Dhivyabharathi Mohan Syncfusion Team December 30, 2021 10:28 AM UTC

Hi Carlos, 
 
We were unable to get the exact CSS issue in the PDF Viewer component with the provided screenshots. We were unable to replicate any CSS issue with the sample which we shared in our previous update. Could you please share more details about the issue with the screenshot and replication steps to replicate this issue? These details will be helpful for us to investigate further and provide the details at the earliest. 
 
Regards, 
Dhivya. 



CR Carlos Reche January 4, 2022 08:50 AM UTC

It seems that the problem lies in the template of the input inside the toptoolbar. In the first instance it works correctly but in the second the input styles are broken.


Attachment: template_input_on_create_6d345c71.7z


DM Dhivyabharathi Mohan Syncfusion Team January 5, 2022 01:47 PM UTC

Hi Carlos, 
 
We have checked that the reported CSS issue is not replicated on our end. We have shared the screenshot in which the PDF Viewer component is displayed properly without any CSS issues on the Two tabs. 
 
Screenshot of First tab: 
 
Screenshot of Second tab: 
 
 
Could you please let us know whether you are facing the style issue with the PDF Viewer component or Toolbar component? And kindly share the simple modified sample in which you are facing this issue. So that, it will be helpful for us to investigate further and provide the solution at the earliest. 
 
Regards, 
Dhivya. 



CR Carlos Reche January 11, 2022 02:30 PM UTC

The input which breaks the style is the one generated by means of a template as I show in the images below.




DM Dhivyabharathi Mohan Syncfusion Team January 12, 2022 11:22 AM UTC

Hi Carlos, 
  
 
 
We have checked the provided screenshot. On further analysis with the provided screenshot, we suspect that you are facing the CSS style issue with the toolbar which is above the PDF Viewer and not facing the issue with the PDF Viewer. And we suspect that the reported style issue is due to you have used the same Id for the different toolbars in the two different instances. Due to this, the style gets overloaded. So, is it possible to share the simple modified sample in which the reported issue occurs? So, that it will be helpful for us to investigating further and provide the solution at the earliest. 
  
 
 
Regards, 
Dhivya. 



CR Carlos Reche January 18, 2022 09:37 AM UTC

We have already solved the problem, thanks!


Loader.
Up arrow icon