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.rhkb.cn/news/400017.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【npm】如何将开发的vite插件发布到npm

前言 简单说下 npm 是什么&#xff1a; npm 是一个 node 模块管理工具&#xff0c;也是全球最大的共享源。 npm 工具与 nodejs 配套发布&#xff0c;便利开发人员共享代码。npm 主要包括 npm 官方网站、CLI&#xff08;控制台命令行工具&#xff09;、和 registry&#xff08;…

Python酷库之旅-第三方库Pandas(079)

目录 一、用法精讲 326、pandas.Series.str.normalize方法 326-1、语法 326-2、参数 326-3、功能 326-4、返回值 326-5、说明 326-6、用法 326-6-1、数据准备 326-6-2、代码示例 326-6-3、结果输出 327、pandas.Series.str.pad方法 327-1、语法 327-2、参数 327…

升级软文发稿开源系统源码论文期刊一键发布

升级软文发稿运营管理源码—论文期刊一键发布 软文发稿系统源码&#xff08;软文发布系统&#xff09;在基于旧版本的媒介软文发布平台项目改造升级了新的功能模块简称&#xff08;3.0版&#xff09;本系统还是基于开源的PHPMYSQLlayui&#xff08;前端界面&#xff09;代码进行…

Vue3使用ECharts的曲线条形堆叠混合图

先上效果图 图表容器 <div id"leftChart" style"height: 28vh"></div> <div id"rightChart" style"height: 28vh"></div> 监听resize视图窗口大小&#xff0c;可以让chart图表自适应大小 const leftChart …

wireshark使用介绍及案例分享

一、wireshark介绍 1、定义 wireshark是非常流行的网络封包分析软件,简称小鲨鱼,功能十分强大。可以截取各种网络封包,显示网络封包的详细信息。对应的,linux下的抓包工具是 tcpdump。 1.1、网络基础 参考TCP/IP五层模型,帧结构如下: 帧字段 帧字段含义 Frame 物理层的…

统计学第3天

P值 P值是原假设&#xff08;零假设&#xff09;H0为真的前提下&#xff0c;观察到的异常数据出现的概率。 如果P值很小&#xff0c;意味着原假设为真的情况下&#xff0c;取出能拒绝原假设数据的概率极低&#xff0c;此时取出了一个数据和原假设不符&#xff0c;说明了该组数…

ICMAN水位接近式检测方案(非接触式)

ICMAN水位液位接近式检测方案&#xff08;非接触式&#xff09; 我们的很多家用电器都会需要&#xff1a;液位检测 缺水&溢水提醒保护、高低液位提醒 液位传感器 像健康家电——烧水煮茶熬养生汤的烧水壶、豆浆机、养生壶等需要缺水保护和防溢液提醒&#xff1b; 像清洁…

DAMA学习笔记(十五)-数据管理组织与角色期望

1.引言 随着数据领域的快速发展&#xff0c;组织需要改进管理和治理数据的方式。当前&#xff0c;大多数组织正面临着越来越多的数据。这些数据格式多样、数量 庞大&#xff0c;并来源于不同的渠道。由于数据数量和种类的增加&#xff0c;加剧了数据 管理的复杂性。与此同时&am…

科研绘图系列:R语言多分组箱线图(grouped boxplot)

介绍 分组箱线图(Grouped Boxplot)是一种用于展示不同组别数据分布情况的统计图表。它将箱线图(Boxplot)按照不同的类别或组别进行分组,使得可以同时比较多个组别的数据特征。 箱线图本身是一种标准化的显示数据分布的方法,它能够展示数据的中位数、四分位数以及异常值…

【upload]-ini-[SUCTF 2019]CheckIn-笔记

上传图片木马文件后看到&#xff0c;检查的文件内容&#xff0c;包含<? 一句话木马提示 检查的文件格式 用如下图片木马&#xff0c;加上GIF89a绕过图片和<?检查 GIF89a <script languagephp>eval($_POST[cmd])</script> .user.ini实际上就是一个可以由用…

RAG与LLM原理及实践(11)--- Milvus hybrid search 源码分析及思想

目录 背景 hybrid search 源码分析 WeightedRanker 源码 hybrid search 核心 参数详解 基本入参 扩展入参 aysnc方式代码调用案例 说明 源码逻辑 prepare 调用过程 stub 调用结果 stub 调用过程 blocking 与 async 调用方式 深入内部core weightedRanker 的ch…

UCOSIII事件标志组详解

UCOSIII中的事件标志组是一种用于任务同步和事件管理的机制&#xff0c;它允许任务和中断服务例程&#xff08;ISR&#xff09;发布事件标志&#xff0c;并允许任务等待这些事件标志的发生。以下是对UCOSIII事件标志组的详细介绍&#xff1a; 1. 定义与创建 定义&#xff1a;…

软考:软件设计师 — 13.数据结构

十三. 数据结构 数据结构部分也可参考文章&#xff1a;Java数据结构知识点 — 5种常见数据结构 1. 线性结构 &#xff08;1&#xff09;线性表 顺序表 线性表的顺序存储是指用一组地址连续的存储单元依次存储线性表中的数据元素&#xff0c;从而使得逻辑上相邻的两个元素…

并行计算模型

像其他专业行话一样&#xff0c;并行计算也有自己的行话。行话就像个大坑&#xff0c;坑中的人需要在其中浸淫很久&#xff0c;才能逐渐适应其语境&#xff0c;然而很多行话的使用常常是草率与不精确的。有时候把鬼都听不懂的行话理解了&#xff0c;再跟别人说鬼话&#xff0c;…

【MySQL 06】表的约束

文章目录 &#x1f308; 一、约束的概念&#x1f308; 二、空属性约束⭐ 1. 空值无法参与运算⭐ 2. 设置非空属性 &#x1f308; 三、默认值约束⭐ 1. 默认值使用案例⭐ 2. 同时设置 not null 和 default &#x1f308; 四、列描述约束&#x1f308; 五、zerofill 补零约束&…

校园外卖平台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;菜品信息管理&#xff0c;菜品分类管理&#xff0c;购买菜品管理&#xff0c;订单信息管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&a…

【python报错已解决】`IndexError: list index out of range`

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法2.1 方法一&#xff1a;检查索引范围2.2 方法二…

Java - IDEA开发

使用IDEA开发Java程序步骤&#xff1a; 创建工程 Project&#xff1b;创建模块 Module&#xff1b;创建包 Package&#xff1b;创建类&#xff1b;编写代码&#xff1b; 如何查看JDK版本 Package介绍: package是将项目中的各种文件,比如源代码、编译生成的字节码、配置文件、…

哈希表 - 三数之和

15. 三数之和 方法一&#xff1a;排序双指针 /*** param {number[]} nums* return {number[][]}*/ var threeSum function(nums) {const res [], len nums.length;// 将数组排序nums.sort((a, b) > a - b)for (let i 0; i < len; i) {let l i 1, r len - 1, iNum…

宝塔面板实现定时任务删除 logs文件 加条件删除 只删除一个月前的日志

我们在开发中难免用到了日志功能&#xff0c;随着日志越来越多导致占用我们的内存 下面是一个简单的 使用宝塔面板里面的定时任务来实现删除日志案例 第一步 首先我的日志文件目录 都在log文件夹里面&#xff0c; 每个月生成一个日志文件夹 文件夹命名是年月来命名的 第二…