Child Item

How can I display PDF in my React app

Hi,

I am tryng to display pdf on my website but I try to use files_get_preview function, download but only think I can Fetch the data but not displaying in an embed/iframe.

I have those erros; "unsupported extension" and "a frame because it set 'X-Frame-Options' to 'deny'."

How can I display a simple PDF on my site?

Thx

Find more posts tagged with

API

Abuse

Comments

Jay

Hi there, if you’re referring to displaying a file as it appears in your Dropbox account via a shared link, then you can do so by renaming the dl=0 to raw=1 in the link.

This way the PDF gets rendered as the PDF, and should be treated as such.

If you’re referring however to accessing the file via the Dropbox API, let me know and I can forward this thread to the appropriate forum!

mrdk86

Is not working I'll paste the code for any suggestion

dbx.filesListFolder({path: '/folder_name})
      .then(function(response) {
        if(response){
        var a = []
        response.entries.map((r, i) => {
          console.log(r.name)
          return a.push(r.path_display)
        })
        self.setState({name: a})
        }
      })
      .catch(function(error) {
        console.log(error);
      });

I tryed using filesDownload aswell but the same

any suggestion?

thanks!

Jay

Looks like you’re referring to the API functions. I’ll move this thread to the correct section for the expert to assist you.

Greg-DB

The filesListFolder method you included in your code is just for listing files and folders; it doesn't itself offer access to file data.

Also, the 'https://www.dropbox.com/home/folder/...' kind of URLs you mentioned are private URLs for your account. You can't use them to embed file data. Jay was referring to getting a shared link (e.g., via the Dropbox web site, or via the Dropbox API), and modifying it for direct access.

If you're using the API via the JavaScript SDK and want to retrieve the original file data, you should use the filesDownload method. E.g., you can use that to get the PDF data for a PDF file. (This is distinct from the shared link functionality noted above.)

If the file isn't already a PDF but you want a PDF version of it, you can use the filesGetPreview method, if the file is a supported type (see the docs for information).

In any case though, these method only gives you the data. They do not offer a mechanism for embedding that data on web site. That's a more general web development question, not specific to Dropbox, so I can't offer guidance on that in particular.