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

news2024/9/21 4:36:12

A. 最终效果

请添加图片描述

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

import gradio as gr
import subprocess


def 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 component
    html_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 link
    action_button = gr.Button(
        value="Open PPTX", elem_id="my_btn", visible=False)

    # Link the button to the Python function
    action_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 subprocess


def 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 component
    html_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 link
    action_button = gr.Button(
        value="Open PPTX", elem_id="my_btn", visible=False)

    # Link the button to the Python function
    action_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 os


def open_pptx():
    pptx_path = '/Users/liuguokai/Downloads/240528-工业大模型1.pptx'

    try:
        if platform.system() == 'Darwin':  # macOS
            subprocess.Popen(['open', pptx_path])
        elif platform.system() == 'Windows':  # Windows
            os.startfile(pptx_path)
        elif platform.system() == 'Linux':  # Linux
            subprocess.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 component
    html_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 link
    action_button = gr.Button(
        value="Open PPTX", elem_id="my_btn", visible=False)

    # Link the button to the Python function
    action_button.click(open_pptx, outputs=None)

    demo.launch(inbrowser=True)

说明:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2037520.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

七、3 AD单通道(代码)

1、步骤 &#xff08;1&#xff09;开启GPIO和ADC的时钟、配置ADCCLK的分频器 &#xff08;2&#xff09;配置GPIO &#xff08;3&#xff09;配置多路开关&#xff08;把左边的通道接入到右边的规则组中&#xff09; &#xff08;4&#xff09;配置ADC转换器 &#xff08;…

HarmonyOs编写一个案例实现一个照片选择(阶段进阶 四种需求 逐一完善)

需求1. .实现照片选择 并将选择好的照片展示出来 import { GoodItem } from ../06/modules;Entry Component struct PhotoPage {State message: string 实现一个相册;State List: GoodItem[] [{goods_name: dsfjlsjkfsf,goods_price: 100,goods_img: https://img1.baidu.com…

Springboot3 配置sql打印到控制台

一、pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-log4j2</artifactId><version>3.1.2</version></dependency> 二、application.yml com.lingyang.system # log4j2配…

《密码编码学与网络安全原理与实践》第十一章、第十二章、第十三章 数据完整性算法

数据完整性算法 概念消息加密实现认证对称加密提供认证公钥加密提供认证 Hash函数要求满足特点哈希函数安全性要求密码分析基于分组密码链接的Hash函数生日攻击&#xff1a; MD5SHA-256算法步骤SHA-3散列函数实现消息认证散列函数实现消息认证方法一散列函数实现消息认证方法二…

HttpClient在ASP.NET Core中的最佳实践:实现高效的HTTP请求

引言 在现代Web开发中&#xff0c;HTTP请求的高效性和可靠性对于应用的整体性能至关重要。ASP.NET Core提供了HttpClient类&#xff0c;它是一个强大且灵活的工具&#xff0c;可以用来发送HTTP请求并处理响应。然而&#xff0c;如何在ASP.NET Core中实现高效的HTTP请求&#x…

Java基础篇/IO流的介绍和了解

一、java的IO是基于流&#xff08;stream&#xff09;概念的&#xff0c;什么是流: 在Java中&#xff0c;流&#xff08;Stream&#xff09;是一种抽象的数据传输方式&#xff0c;它代表了数据的序列。流可以用于表示来自各种源的数据输入&#xff0c;以及向各种目的地发送数据…

商品信息采集技巧大公开:五种高效采集方法分享

摘要&#xff1a; 面对日益激烈的电商竞争&#xff0c;高效采集淘宝商品信息成为商家致胜的关键。本文将揭秘2024年最实用的五种淘宝商品信息采集技巧&#xff0c;助您在大数据时代抢占先机&#xff0c;提升市场竞争力。 一、为何淘宝商品信息采集如此重要&#xff1f; 在电…

新闻稿件管理系统

TOC springboot109新闻稿件管理系统 系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理新…

社区团购独立源码最新版,包含小程序前端、管理后台、数据库

介绍&#xff1a; 社区拼团&#xff0c;社区电商等形式的新型社交电商平台源码。独创双模式&#xff1a;以团长为中心&#xff0c;以小区为中心&#xff0c;首款支持社区团购加社群团购模式的团购小程序&#xff0c;线上线下双模式&#xff0c;后台自由配置配送方式。 更新说…

五分钟学会辨别葡萄酒的优劣

不论是买什么商品&#xff0c;人们都十分关心品质。比如&#xff0c;要买葡萄酒&#xff0c;你首先要确认的就是这款酒好不好。那么&#xff0c;如何才能做到快速识别葡萄酒的好坏呢&#xff1f; 一、观察外观 首先&#xff0c;观察干红葡萄酒的外观是初步判断其品质的第一步。…

IP基础(通俗易懂版)

IP 位于 TCP/IP 参考模型的第三层&#xff0c;也就是⽹络层。 ⽹络层的主要作⽤是&#xff1a;实现主机与主机之间的通信&#xff0c;也叫点对点通信。 1 、网络层&#xff08; IP) 与数据链路层 (MAC) 有什么关系呢&#xff1f; MAC 的作用&#xff1a; 实现【直连】的两个…

【乐吾乐大屏可视化组态编辑器】条件修改属性

条件修改属性 在线使用&#xff1a;https://v.le5le.com/ 如图所示&#xff0c;右边文本图元数值一直在发生变化&#xff0c;当数值大于等于600、或者小于等于200的时候&#xff0c;左侧正方形图元背景颜色变成红色&#xff0c;产生告警效果&#xff1b;当数值在200到600之间…

海康相机二次开发学习笔记1-环境配置

因为最近可以用一段时间海康加密狗,Visionpro二次开发暂时停更一段时间,开始记录一下海康相机二次开发的学习笔记. 环境配置 1. 创建项目 打开Visual Studio,新建.NetFramework项目,选择WindowsForms,点击下一步,选择项目名称,点击下一步,点击确定打开项目属性,点击生成选项…

系统编程-认识Linux及常用指令

1 认识Linux及常用指令 主要学习函数 一、认识linux Linux 是由 UNIX 发展而来的&#xff0c;UNIX 是由程序员设计&#xff0c;它的主要服务对象也是程序员。Linux 继承了 UNIX 的设计目标。 1、linux系统的主要特性 多用户多任务开源 免费 大家都可以用庞大的社区群支持多…

Linux os下制作deb包

在 linux os下制作 .deb 包涉及以下几个主要步骤。假设已经有一个应用程序或软件项目&#xff0c;并且希望将它打包为一个 .deb 包。 1. 准备源代码和构建环境 首先&#xff0c;需要准备好应用程序的源代码&#xff0c;并确保它可以在开发环境中成功编译和运行。 2. 创建目录…

Istio学习整理

一、Service Mesh Service Mesh 的中文译为 “服务网格” &#xff0c;是一个用于处理服务和服务之间通信的基础设施层&#xff0c;它负责为构建复杂的云原生应用传递可靠的网络请求&#xff0c;并为服务通信实现了微服务所需的基本组件功能&#xff0c;例如服务发现、负载均衡…

【嵌入式】指针与整数的桥梁、跨平台编程的黄金钥匙:揭开 uintptr_t 和 intptr_t 的神秘面纱

目录 一、intptr_t 和 uintptr_t 详解二、适用场景三、示例四、写在最后 一、intptr_t 和 uintptr_t 详解 intptr_t 和 uintptr_t&#xff0c;这两个数据类型是ISO C99定义的。主要用于处理指针和整数之间的转换。它们在需要将指针转换为整数进行操作&#xff0c;或者将整数转…

spring boot入门案例

一、案例需求 请求Controller中的方法&#xff0c;并将返回值响应到页面 二、代码实现 1.依赖管理——pom.xml文件 &#xff08;1&#xff09;引入 &#xff08;2&#xff09;引入依赖集合 &#xff08;3&#xff09;引入插件&#xff1a;为了方便运行&#xff0c;将project…

[Meachines] [Medium] Haircut Curl命令注入+TRP00F自动化权限提升+Screen4.5.0权限提升

信息收集 IP AddressOpening Ports10.10.10.24TCP:22,80 $ nmap -p- 10.10.10.24 --min-rate 1000 -sC -sV ORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 7.2p2 Ubuntu 4ubuntu2.2 (Ubuntu Linux; protocol 2.0) | ssh-hostkey: | 2048 e9:75:c1:e4:b3:63…

驱动开发系列10 - Linux Graphics 图形栈介绍

目录 一:Linux 图形栈总体结构 1. 整体图形栈: 2. 现代3D图形栈: 二:Xorg 介绍 Xorg 概述: Xorg的发展历史: Xorg绘制原理: Xorg的缺点: 三:Wayland 介绍 一:Linux 图形栈总体结构 1. 整体图形栈: 应用程序->桌面环境->GUI框架->Display Client->Displ…