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

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

---

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

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

// 新增的 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 属性。

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 类

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 方法

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 方法：

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

---

完整代码整合后的修改点

修改后的 VueFormService 类

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 文件夹，路径可自定义。

---

安全性提示

• 如果允许用户自定义保存路径，建议通过 FolderBrowserDialog 或 SaveFileDialog 让用户选择路径。
• 启用本地文件访问时，需谨慎处理潜在的安全风险（例如恶意脚本写入文件）。