CODEWITHSUNDEEP
jqueryhtml
user466130
user466130

Reputation: 367

display pdf in modal window instead of downloading the file or display in new tab

I am creating a dash-plotly app which contains a bar chart with xtick, and is hyperlinked to a pdf file. I would like to display the pdf file in a popup window instead of downloading it or displaying it in the new tab. How can I achieve this?

dash-plotly code:

x_var = [f"<a href='https://xx/xx.pdf' class='show-pdf' target='_blank'>{rule}</a>" for rule in df_temp.index]
data.append(go.Bar(x=x_var, y=df_temp.values, name=cat, marker={'color':'#d0384d'}, visible = visible))

html (svg):

<g class="xtick">
<text text-anchor="start" x="0" y="293" data-unformatted="<a href='https://xx/xx.pdf' class='show-pdf'>CheckAttributeConflict</a>" data-math="N" transform="translate(391.57,0) rotate(30,0,287)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre; pointer-events: all;"><a xlink:show="new" target="_blank" xlink:href="https://xx/xx.pdf" style="cursor:pointer">CheckAttributeConflict</a></text></g>
<a xlink:show="new" target="_blank" xlink:href="https://xx/xx.pdf" style="cursor:pointer">CheckAttributeConflict</a>
</text>
</g>

Upvotes: 0

Views: 858

Answers (2)

mellofellow
mellofellow

Reputation: 1

Here's what I did, to get a modal window to pop-up from a button on my dash. All you need to do is link it to your graph object instead, but the logic should be the same:

CSS:

.modal {position: fixed;    z-index: 1002; left: 0; top: 0; width: 90%; height: 90%; margin: 10px; background-color: rgba(0, 0, 0, 0.6);}
.modal-content {margin: 10px; padding: 0px; height: 100%; background-color: silver;}

app.py:

html.Div([dbc.Button("PDF report", style={'textAlign': 'left','width':220, 'color': 'white', 'backgroundColor': 'silver', 'margin-left':10}, id="open")]),
html.Div([dbc.Modal([dbc.Button("X", size="sm", id="close"), dbc.ModalBody(html.Iframe(id="embedded-pdf", src="../report.pdf", style={"width": "99%", "height": "90%"}))], id="modal")]),


@app.callback(
    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")])

def toggle_modal(n1, n2, is_open):
    if n1 or n2: return not is_open
    return is_open

Upvotes: 0

tremor
tremor

Reputation: 3186

I'm sorry to say you can't really control this behavior. You or your visitor's browser is in control. This will be different per browser and per user based on their preferences. This is how you set the behavior in Firefox. It's similar in other browsers as well.

  1. Click the menu button and choose Options.
  2. Select the Applications panel on the left.
  3. Find the setting for "Portable Document Format (PDF)"

Also, if you have a PDF reader or not makes a difference in whether the browser will save, or try to open it in your reader. Many of the current/modern browser versions are equipped with a built-in PDF reader.

If you have the option to use another format than .pdf like .svg or .jpg - this is something that could be displayed inline in HTML and therefor could be put into a modal window.

Upvotes: 1

Related Questions