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

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

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)

说明:

  1. href="#" 可以让链接保持为一个有效的锚点,防止浏览器跳转。
  2. 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)

说明:

  1. macOS: 使用 open 命令来打开文件。
  2. Windows: 使用 os.startfile 来打开文件。
  3. Linux: 使用 xdg-open 命令来打开文件,这个命令在大多数 Linux 发行版中都可以使用。

这样,代码可以在不同的操作系统上正确运行,并根据系统选择相应的命令来打开文件。

http://www.lryc.cn/news/420407.html

相关文章:

  • go在linux上安装
  • 算法日记day 35(动归之分割等和子集|最后一块石头的重量2)
  • FPGA使用sv生成虚拟单音数据
  • Linux shell编程:监控进程CPU使用率并使用 perf 抓取高CPU进程信息
  • Linux网络编程的套接字分析(其一,基本知识)
  • 后端Web开发之Maven
  • 前端创新实践:用JavaScript打造网页扫码新体验
  • AWS CLI命令行
  • 领导力培养的底层逻辑
  • 【MATLAB第107期】基于MATLAB的Morris局部敏感性分析模型(无目标函数)
  • Tomcat搭建JSPServlet
  • 32位定点数和32/64位浮点数的二进制生成方法
  • STM32利用arm-dsp库进行FIR低通滤波【详细】
  • Efficient-KAN 源码详解
  • Jlink commander使用方法(附指令大全)
  • Java SpringBoot实现PDF转图片
  • elasticsearch SQL:在Elasticsearch中启用和使用SQL功能
  • Java 并发编程:线程变量 ThreadLocal
  • 【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】018 - init_sequence_f 各函数源码分析(二)
  • LVS原理——详细介绍
  • MYSQL 5.7.36 等保 建设记录
  • fatal: unable to access ‘https://github.com/xxxxx
  • 从零开始的CPP(38)——递归与动态规划
  • 从战略到系统架构:信息系统设计的全面解析
  • GEE调用中国(China Land Cover Dataset,简称CLCD)1990-2022年30米分辨率的土地分类数据
  • 三十八、大数据技术之Kafka(1)
  • 将 Tcpdump 输出内容重定向到 Wireshark
  • 【Python蓝屏程序(管理员)】
  • OpenGL ES->GLSurfaceView绘制图形的流程
  • Linux OOM Killer详解