CefSharp 文件下载和保存功能-监听前端事件

重点在 启用文件下载通过 JavaScript 调用 C# 保存文件


1. 添加文件下载处理器 (DownloadHandler)

VueFormService 类中,添加一个实现 IDownloadHandler 接口的类,用于处理文件下载到本地。

csharp 复制代码
// 新增的 DownloadHandler 类
public class DownloadHandler : IDownloadHandler
{
    public void OnBeforeDownload(IWebBrowser chromiumWebBrowser, IBrowser browser, DownloadItem downloadItem, IBeforeDownloadCallback callback)
    {
        // 设置默认保存路径(例如保存到 Downloads 文件夹)
        string savePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.UserProfile), "Downloads", downloadItem.SuggestedFileName);
        callback.Continue(savePath, showDialog: false); // showDialog: true 会弹出保存对话框
    }

    public void OnDownloadUpdated(IWebBrowser chromiumWebBrowser, IBrowser browser, DownloadItem downloadItem, IDownloadItemCallback callback)
    {
        // 下载状态更新(例如进度、完成通知)
        if (downloadItem.IsComplete)
        {
            MessageBox.Show($"文件已保存到:{downloadItem.FullPath}");
        }
    }
}

2. LoadVuePage 方法中绑定下载处理器

在初始化浏览器时,设置 DownloadHandler 属性。

csharp 复制代码
public static void LoadVuePage(VueBaseForm vueForm, string subFolder = "")
{
    // ... 其他代码 ...

    ChromiumWebBrowser browser = new ChromiumWebBrowser(url);
    vueForm.browser = browser;

    // 添加下载处理器
    browser.DownloadHandler = new DownloadHandler();  // <-- 新增代码

    vueForm.Controls.Add(browser);
    browser.Dock = DockStyle.Fill;

    // ... 其他代码 ...
}

3. 添加 JavaScript 调用 C# 保存文件的功能

RegisterHander 方法中,注册一个供 JavaScript 调用的对象,用于直接保存文件内容。

(1) 新增 FileSaveHandler
csharp 复制代码
public class FileSaveHandler
{
    public void SaveFile(string fileName, string content)
    {
        string savePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.UserProfile), "Downloads", fileName);
        File.WriteAllText(savePath, content);
        MessageBox.Show($"文件已保存到:{savePath}");
    }
}
(2) 修改 RegisterHander 方法
csharp 复制代码
public static void RegisterHander(VueBaseForm vueForm)
{
    ChromiumWebBrowser browser = vueForm.browser;

    // 注册文件保存处理器
    browser.JavascriptObjectRepository.Register("fileSaver", new FileSaveHandler(), isAsync: false, options: BindingOptions.DefaultBinder);  // <-- 新增代码

    // ... 其他原有注册代码 ...
}

4. JavaScript 调用示例

在 Vue 页面中,通过 fileSaver 对象调用 C# 的 SaveFile 方法:

javascript 复制代码
// 示例:点击按钮保存文件
function saveFile() {
    const content = "Hello, this is a saved file!";
    fileSaver.saveFile("example.txt", content);
}

完整代码整合后的修改点

修改后的 VueFormService
csharp 复制代码
using CefSharp;
using CefSharp.WinForms;
using CefSharpVue;
using CefSharpVue.Core.Utils.Winform;
using CefSharpVue.Hander;
using DPI_Ter.Vue;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Text;
using System.Windows.Forms;

namespace CefSharpVue
{
    public class VueFormService
    {
        // ... 其他原有代码 ...

        public static void LoadVuePage(VueBaseForm vueForm, string subFolder = "")
        {
            // ... 其他代码 ...

            ChromiumWebBrowser browser = new ChromiumWebBrowser(url);
            vueForm.browser = browser;

            // 绑定下载处理器
            browser.DownloadHandler = new DownloadHandler();  // <-- 新增代码

            vueForm.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;

            // ... 其他代码 ...
        }

        public static void RegisterHander(VueBaseForm vueForm)
        {
            ChromiumWebBrowser browser = vueForm.browser;

            // 注册文件保存处理器
            browser.JavascriptObjectRepository.Register("fileSaver", new FileSaveHandler(), isAsync: false, options: BindingOptions.DefaultBinder);  // <-- 新增代码

            // ... 其他原有注册代码 ...
        }

        // ... 其他原有代码 ...
    }

    // 新增的 DownloadHandler 类
    public class DownloadHandler : IDownloadHandler
    {
        public void OnBeforeDownload(IWebBrowser chromiumWebBrowser, IBrowser browser, DownloadItem downloadItem, IBeforeDownloadCallback callback)
        {
            string savePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.UserProfile), "Downloads", downloadItem.SuggestedFileName);
            callback.Continue(savePath, showDialog: false);
        }

        public void OnDownloadUpdated(IWebBrowser chromiumWebBrowser, IBrowser browser, DownloadItem downloadItem, IDownloadItemCallback callback)
        {
            if (downloadItem.IsComplete)
            {
                MessageBox.Show($"文件已保存到:{downloadItem.FullPath}");
            }
        }
    }

    // 新增的 FileSaveHandler 类
    public class FileSaveHandler
    {
        public void SaveFile(string fileName, string content)
        {
            string savePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.UserProfile), "Downloads", fileName);
            File.WriteAllText(savePath, content);
            MessageBox.Show($"文件已保存到:{savePath}");
        }
    }
}

功能说明

  1. 文件下载

    • 当页面触发下载(例如 <a download> 链接或 JavaScript 下载),文件会自动保存到用户的 Downloads 文件夹。
    • 通过 DownloadHandler 类控制保存路径和下载完成通知。
  2. JavaScript 调用 C# 保存文件

    • 在 Vue 页面中,通过 fileSaver.saveFile(fileName, content) 直接调用 C# 方法保存文本文件。
    • 文件默认保存到 Downloads 文件夹,路径可自定义。

安全性提示

  • 如果允许用户自定义保存路径,建议通过 FolderBrowserDialogSaveFileDialog 让用户选择路径。
  • 启用本地文件访问时,需谨慎处理潜在的安全风险(例如恶意脚本写入文件)。
相关推荐
唐某人丶3 分钟前
教你如何用 JS 实现 Agent 系统(3)—— 借鉴 Cursor 的设计模式实现深度搜索
前端·人工智能·aigc
看到我请叫我铁锤8 分钟前
vue3使用leaflet的时候高亮显示省市区
前端·javascript·vue.js
南囝coding17 分钟前
Vercel 发布 AI Gateway 神器!可一键访问数百个模型,助力零门槛开发 AI 应用
前端·后端
AI大模型23 分钟前
前端学 AI 不用愁!手把手教你用 LangGraph 实现 ReAct 智能体(附完整流程 + 代码)
前端·llm·agent
小红40 分钟前
网络通信基石:从IP地址到子网划分的完整指南
前端·网络协议
一枚前端小能手44 分钟前
🔥 前端储存这点事 - 5个存储方案让你的数据管理更优雅
前端·javascript
willlzq1 小时前
深入探索Swift的Subscript机制和最佳实践
前端
RockerLau1 小时前
micro-zoe子应用路由路径污染问题
前端
代码代码快快显灵1 小时前
Axios的基本知识点以及vue的开发工程(基于大事件)详细解释
前端·javascript·vue.js
文心快码BaiduComate1 小时前
再获殊荣!文心快码荣膺2025年度优秀软件产品!
前端·后端·代码规范