Question

我正在创建一个仪表板应用程序，其中包含带有xtick的条形图，并被超链接到pdf文件。我想在弹出窗口中显示pdf文件，而不是下载它或在新选项卡中显示它。我该如何实现？

短划线代码：

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>

Answer 1

很抱歉，您不能真正控制此行为。您或访客的浏览器处于控制之中。每个浏览器和每个用户的偏好都会有所不同。这就是您在Firefox中设置行为的方式。在其他浏览器中也是如此。

单击菜单按钮，然后选择选项。
选择左侧的“应用程序”面板。
找到“便携式文档格式（PDF）”的设置

此外，如果您拥有PDF阅读器，则是否保存浏览器或尝试在阅读器中打开它也会有所不同。许多当前/现代的浏览器版本都配备了内置的PDF阅读器。

如果您可以选择使用.pdf以外的其他格式，例如.svg或.jpg，则可以用HTML内联显示这些内容，因此可以将其置于模式窗口中。

Answer 2

这就是我要做的，是从仪表板上的按钮上弹出一个模式窗口。您需要做的就是将其链接到图形对象，但是逻辑应该相同：

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

在模式窗口中显示pdf，而不是下载文件或在新选项卡中显示

2 个答案: