Load Image in Vue Pdf Viewer

[Shannara]

How to load image in my vue pdf viewer?

[Mohan Selvaraj]

Hi  Shannara,  

   

Can you please let us know whether your requirement is to add a custom image in the PDF document? If yes, we can add the image as the custom stamp in the Ul level and also by using the code-behind.  

   

   

Adding custom stamp to the PDF document  

   

·       Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.  

·       Click the Stamp Annotation dropdown button. A dropdown pop-up will appear and shows the stamp annotations to be added.  

·       Click the Custom Stamp button.  

  

·       The file explorer dialog will appear, choose the image, and then add the image to the PDF page.  

·          

Note: The JPG and JPEG image format are only supported in custom stamp annotations.  

   

We can also the custom stamps from code behind using the customStampSettings property in a button click,  

   

https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customstampsettings    

   

   <ejs-button ref="imageBtn" v-on:click.native="imageClicked">AddImage</ejs-button>  

    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :documentLoad="documentLoad"> </ejs-pdfviewer>  

   

var viewer;  

export default {  

  name: 'app',  

  data () {  

    return {  

      serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"  

      documentPath:"PDF_Succinctly.pdf"  

      };  

      },  

  provide: {  

    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, ThumbnailView, Print, TextSelection, TextSearch]  

  },   

  methods: {  

            imageClicked: function (args) {  

viewer.customStampSettings = { customStamps: [{ customStampImageSource: "base64string", customStampName: "image" }], isAddToMenu: true };   

            },  

            documentLoad: function (args) {  

                viewer = this.$refs.pdfviewer.ej2Instances;  

            },  

  }  

}  

   

   

Regards,  

Mohan S 

[Shannara]

Hi, 

My requirement is to load an image in the pdf viewer instead of pdf file. Is this possible?

[Akshaya Arivoli]

Hi Shannara, 

Thank you for your update. 

Currently we do not have support to load the image directly in PDF Viewer. However, we can include that image in PDF using PDF Base library and then we can load that in PDF Viewer. Please refer to the below link to include image in PDF, 

https://help.syncfusion.com/file-formats/pdf/working-with-images#inserting-an-image-in-a-new-document  

Please try it and revert us with more details about your requirement if you need further assistance  

Regards, 

Akshaya