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 让用户选择路径。
  • 启用本地文件访问时,需谨慎处理潜在的安全风险(例如恶意脚本写入文件)。
相关推荐
前端小巷子15 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168823 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼39 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er2 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript