当前位置：首页 > news >正文

240810-Gradio通过HTML组件打开本地文件+防止网页跳转到about:blank

news 来源：原创 2024/9/20 9:29:35

A. 最终效果

请添加图片描述

B. 可通过鼠标点击打开文件，但会跳转到`about:blank`

import gradio as gr
import subprocessdef open_pptx():pptx_path = '/Users/liuguokai/Downloads/240528-工业大模型1.pptx'try:subprocess.Popen(['open', pptx_path])return "PPTX file opened successfully."except Exception as e:return f"Failed to open PPTX file. Error: {e}"with gr.Blocks() as demo:# Create a clickable HTML componenthtml_content = '<a href="javascript:void(0)" οnclick="document.getElementById(\'my_btn\').click()">Open PPTX File</a>'html_component = gr.HTML(html_content)# Create a hidden button that will be triggered by the HTML linkaction_button = gr.Button(value="Open PPTX", elem_id="my_btn", visible=False)# Link the button to the Python functionaction_button.click(open_pptx, outputs=None)demo.launch(inbrowser=True)

C. 可通过鼠标点击打开文件，且会跳转到`about:blank`

为了防止每次点击 HTML 组件后自动跳转到 about:blank，你可以尝试将 href="javascript:void(0)" 替换为 href="#"，同时在 onclick 事件中加入 event.preventDefault()，以防止默认的跳转行为。

以下是修改后的代码：

import gradio as gr
import subprocessdef open_pptx():pptx_path = '/Users/liuguokai/Downloads/240528-工业大模型1.pptx'try:subprocess.Popen(['open', pptx_path])return "PPTX file opened successfully."except Exception as e:return f"Failed to open PPTX file. Error: {e}"with gr.Blocks() as demo:# Create a clickable HTML componenthtml_content = '''<a href="#" οnclick="event.preventDefault(); document.getElementById('my_btn').click()">Open PPTX File</a>'''html_component = gr.HTML(html_content)# Create a hidden button that will be triggered by the HTML linkaction_button = gr.Button(value="Open PPTX", elem_id="my_btn", visible=False)# Link the button to the Python functionaction_button.click(open_pptx, outputs=None)demo.launch(inbrowser=True)

说明：

href="#" 可以让链接保持为一个有效的锚点，防止浏览器跳转。
在 onclick 中加入 event.preventDefault(); 用于阻止默认的跳转行为，这样在点击 HTML 组件时就不会跳转到 about:blank，只会触发 PPTX 文件的打开操作。

这个代码改动后，你应该能够实现点击 HTML 组件后仅打开指定的 PPTX 文件，而不会跳转到空白页面。

D. 考虑不同平台兼容性后的代码

当前的代码使用 subprocess.Popen(['open', pptx_path]) 命令在 macOS 上运行。要使其兼容 Windows 和 Linux，需要根据操作系统选择不同的命令来打开文件。

以下是更新后的代码，它可以在 Windows、Linux 和 macOS 上运行：

import gradio as gr
import subprocess
import platform
import osdef open_pptx():pptx_path = '/Users/liuguokai/Downloads/240528-工业大模型1.pptx'try:if platform.system() == 'Darwin':  # macOSsubprocess.Popen(['open', pptx_path])elif platform.system() == 'Windows':  # Windowsos.startfile(pptx_path)elif platform.system() == 'Linux':  # Linuxsubprocess.Popen(['xdg-open', pptx_path])return "PPTX file opened successfully."except Exception as e:return f"Failed to open PPTX file. Error: {e}"with gr.Blocks() as demo:# Create a clickable HTML componenthtml_content = '''<a href="#" οnclick="event.preventDefault(); document.getElementById('my_btn').click()">Open PPTX File</a>'''html_component = gr.HTML(html_content)# Create a hidden button that will be triggered by the HTML linkaction_button = gr.Button(value="Open PPTX", elem_id="my_btn", visible=False)# Link the button to the Python functionaction_button.click(open_pptx, outputs=None)demo.launch(inbrowser=True)