html.Embed 或 html.Iframe 未在 plotly DASH 应用程序中呈现本地 pdf答案

【问题标题】：html.Embed or html.Iframe not rendering local pdf in plotly DASH apphtml.Embed 或 html.Iframe 未在 plotly DASH 应用程序中呈现本地 pdf
【发布时间】：2020-07-19 19:06:02
【问题描述】：

我正在尝试显示从 DASH 应用程序内的本地路径读取的 pdf。我尝试使用嵌入和 iframe。但是，他们都没有显示pdf。此外，没有错误，它只是空白。下面是代码sn-p。

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import PyPDF2
import docx2txt

from jupyter_dash import JupyterDash

#external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = JupyterDash(__name__)

app.layout = html.Div([
    html.Button('Submit',id='submit'),
    html.Embed(src="<path to .pdf>",width="750",height="400",type="application/pdf"),
    html.Div(id='my-div')
])


@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='submit', component_property='n_clicks')]
)
def update_output_div(n_clicks):
   
    if n_clicks:        
        
        my_text = docx2txt.process("<path to .doc>")
        return 'You\'ve entered "{}"'.format(my_text)

app.run_server("inline",port=8060)

我添加了一个提交按钮并读取了一个 word 文件，以确保应用程序本身工作正常。

我正在 Chrome 中的 Jupyter 中运行以下内容。

如果我显示在线 pdf 或网站 url，它可以正常工作。

有什么建议吗？

提前致谢。

【问题讨论】：

标签： python html pdf plotly-dash

【解决方案1】：

我想这对你来说太晚了，但可能会帮助其他也被困在这里的人。我从这篇文章中得到的对我有用的方法：https://community.plotly.com/t/displaying-a-pdf-file-on-plotly-dash-dashboard-in-python/33493/6

我可能弄错了，但似乎相关的是，要提供的文件位于 assets 文件夹中。当使用其他位置时，它会为我将原始应用程序嵌套在 iFrame 中。我使用的元素就是这个。 html.Iframe(src=os.path.join("assets", "pdf_name.pdf"))

我偶然发现了这个，因为我在显示的不同 pdf 之间切换时遇到问题。希望这对未来的答案寻求者有所帮助。

【讨论】：

【解决方案2】：

为了在浏览器中呈现文件，首先打开并解码文件，如下所示：

 with open('<static/blabla/_pdf_name.pdf', 'rb') as pdf:
       pdf_data = base64.b64encode(pdf.read()).decode('utf-8')

只需将 ObjectEl 破折号元素添加到您的应用程序中：

app.layout = html.Div([
dash.html.ObjectEl(data='data:application/pdf;base64,'+ pdf_data,type='application/pdf') etc...

【讨论】：