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 让用户选择路径。
  • 启用本地文件访问时,需谨慎处理潜在的安全风险(例如恶意脚本写入文件)。
相关推荐
是立不是利6 小时前
大文件导致请求被拒的连锁反应
开发语言·前端·javascript
志尊宝6 小时前
Vue3 零基础每日笔记(026):emit 子传父——defineEmits 与事件校验
前端·javascript·html·vue3
风骏时光牛马6 小时前
6个高频实用技术脚本案例,覆盖运维与办公自动化(可直接复用)
前端
爱吃红星柚6 小时前
【学习】Elpis 抽离与发布 npm 包
前端·前端框架·node.js
PedroQue997 小时前
0.5.0重磅发布:动画插件+H5体验全面优化
前端·uni-app
金虹桥程序员7 小时前
【动画】 📚 CSS 动画与 GPU 合成层优化全链路指南
前端·面试
程序员老赵7 小时前
Docker 部署填鸭表单完整教程:搭建私有化问卷与表单收集平台
前端·docker·开源
无限压榨切图仔7 小时前
向量库能搜到内容,为什么还不算学会 RAG
前端·agent
mmsx7 小时前
MapLibre 实战 11|用户说"我的地块丢了":一个 sealed class 图层模型,和四个让我重构三版的坑
android·前端·开源
xqchen7 小时前
代码差异可视化方案选型:diff2html 实战指南
前端