View pdf with React Studio

It is probably an easy thing and I still have to dedicate some time to read but I throw the question to see if someone can guide me in the process.

I am going to create a “details” screen for each of my documents and I would like to have a pdf. How should I proceed to incorporate this into React Studio?

Thank you!

Hi,

I dont know any other way than to simply link to pdf file. Hopefully someone in forum can help you on this matter.

If you want to have some sort of ”embedded pdf” then you probably need to implement it into code or create a plugin for it.

https://levelup.gitconnected.com/how-to-view-pdfs-in-a-react-app-32a9f3c48f06

I am coming back to this as I believe it is not complicated to achieve. So far I have been pointing directly to the link to view the PDF hosted in Google Drive, but that logs out the user from the project and I am looking to view embedded the pdf in the app.

When I tried the Web Content and use the link, it gives me a forbidden error (403 error) so I tried the embed content and used the code:

<iframe src="https://drive.google.com/file/d/<<DOCID>>/preview" width="640" height="480" allow="autoplay"></iframe>

That works. But I would need to change the DOCID dinamically because that value is going to be different for each document. That option is in the Web Content option, but I don’t think it is with the embed content.

How could I get what I am looking for?

Try creating a plugin from this. Plugin simply needs a Data linkage setting and then in the code exporter part you add the code template with Data linkage in the Doc Id variable.

This is just pseudo code but maybe you get the idea of it. Just check the plugin code from other plugins.

    this.getReactWebJSXCode = function(exporter) {
    var valueLinkage = exporter.getExpressionForLinkKey('value');
      var jsx = <iframe src="https://drive.google.com/file/d/${valueLinkage}>>/preview" width="640" height="480" allow="autoplay"></iframe>`;
      return jsx;
    }
    ```

Thank you! Trying to create a plugin for myself is one of my things to do when I have some time. @Adam_Wasserman kindly offered to help me in another post to create a plugin from React-Quill (a rich text editor) but I need to have time to make the effort because it goes beyond my habilities. I understand it shouldn’t be that complicated but I am just learning.