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 让用户选择路径。
  • 启用本地文件访问时,需谨慎处理潜在的安全风险(例如恶意脚本写入文件)。
相关推荐
0思必得05 分钟前
[Web自动化] Selenium设置相关执行文件路径
前端·爬虫·python·selenium·自动化
雯0609~15 分钟前
hiprint:实现项目部署与打印1-官网提供普通html版本
前端·html
不绝1911 小时前
UGUI——进阶篇
前端
Exquisite.1 小时前
企业高性能web服务器(4)
运维·服务器·前端·网络·mysql
2501_944525542 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
2601_949857432 小时前
Flutter for OpenHarmony Web开发助手App实战:快捷键参考
前端·flutter
wangdaoyin20102 小时前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
心柠2 小时前
vue3相关知识总结
前端·javascript·vue.js
Amumu121383 小时前
Vue Router(二)
java·前端
a1117763 小时前
图书借阅管理系统(FastAPI + Vue)
前端·vue.js·fastapi