Electron下载生成的小程序二维码图片(非浏览器a标签下载)

javascript 复制代码
const generateMiniProgramQR = async (
    params: { scene: any; page?: any; width?: number; label?: any },
    ACCESS_TOKEN: any,
    label: any
) => {
    try {
        const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${ACCESS_TOKEN}`
        
        // 渲染进程
        // const { ipcRenderer } = require('electron')

        const downloadFile = async (
            url: string,
            params: { scene: any; page?: any; width?: number | undefined; label?: any },
            filename: string
        ) => {
            try {
                const response = await axios.post(url, params, { responseType: 'arraybuffer' })
                //     //  将二进制数据通过IPC发送到主进程
                //     ipcRenderer.send('silent-download', {
                //         buffer: Buffer.from(response.data),
                //         filename: `${filename}.jpg`,
                //     })

                // 关键:转换为 Uint8Array 而非 Buffer
                const buffer = new Uint8Array(response.data)

                // 通过预加载接口发送
                window.electronAPI.downloadFile(buffer, `${filename}.jpg`)

                // 监听结果(可选)
                window.electronAPI.onDownloadResult(({ success, path, error }) => {
                    if (success) console.log('文件保存至:', path)
                    else console.error('保存失败:', error)
                })
            } catch (error) {
                console.error('下载请求失败:', error)
            }
        }
        downloadFile(url, params, label)
    } catch (error) {
        // 错误处理
        console.error('下载失败:', error)
    }
}

注意

这里用require不行,主线程默认开启contextIsolation,不允许node方式引入

javascript 复制代码
const { ipcRenderer } = require('electron')

主线程main.ts,每次修改文件,项目会自动重启

javascript 复制代码
import { app, BrowserWindow, dialog, ipcMain, shell } from 'electron'
import path from 'node:path'
import fs from 'fs'
ipcMain.on('silent-download', (event, { buffer, filename }) => {
    try {
        const downloadsPath = app.getPath('desktop'); 
        // 改为系统下载目录:app.getPath('downloads')
        const filePath = path.join(downloadsPath, filename);

        // 将 Uint8Array 转换为 Node.js Buffer
        const nodeBuffer = Buffer.from(buffer);
        fs.writeFile(filePath, nodeBuffer, (err) => {
            if (err) {
                event.sender.send('download-result', { success: false, error: err.message });
            } else {
                event.sender.send('download-result', { success: true, path: filePath });
            }
        });
    } catch (error: any) {
        event.sender.send('download-result', { success: false, error: error.message });
    }
});

preload.ts

javascript 复制代码
import { ipcRenderer, contextBridge } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
  downloadFile: (buffer: any, filename: any) => {
    // 验证数据类型
    if (!(buffer instanceof Uint8Array)) {
      throw new Error('必须传递 Uint8Array 类型数据');
    }
    ipcRenderer.send('silent-download', { buffer, filename });
  },
  // 可选:接收主进程反馈
  onDownloadResult: (callback: (arg0: any) => void) => {
    ipcRenderer.on('download-result', (_event, result) => callback(result));
  }
});

electron-env.d.ts

javascript 复制代码
interface IElectronAPI {
  // 声明预加载脚本暴露的方法签名
  downloadFile: (buffer: any, filename: string) => void;
  onDownloadResult: (callback: (arg0: any) => void) => void
  // 其他方法...
}

// Used in Renderer process, expose in `preload.ts`
interface Window {
  ipcRenderer: import('electron').IpcRenderer,
  electronAPI: IElectronAPI;
}
相关推荐
zyplayer-doc21 分钟前
VuePress类静态文档站和动态知识库怎么选:两种技术路线的适用场景
javascript·人工智能·后端·安全·智能手机
java1234_小锋3 小时前
【免费】基于Python的微信小程序网约车(打车,在线叫车,移动出行)系统(FastAPI+Vue3) 锋哥原创出品,必属精品
微信小程序·小程序·fastapi·网约车系统·在线叫车系统
码哥DFS5 小时前
构造函数、实例对象、对象原型 ----三者关系
开发语言·javascript·原型模式
满栀5855 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
jjw_zyfx7 小时前
css vue vite实现闪烁的呼吸效果
javascript·css·vue.js
sunly_7 小时前
React useActionState 的用法详解
前端·javascript·react.js
cyadyx8 小时前
【Three.js】Three.js 中加载 3D 模型
前端·javascript·3d
汉堡大王95278 小时前
前端工程师 TypeScript 上手指南:一条清晰的从入门到精通路线
前端·javascript·react.js
wear工程师8 小时前
防抖为什么会失效?React 面试里的闭包和定时器
javascript·react.js
浅水壁虎8 小时前
vue基础(第四章 Pinia)
前端·javascript·vue.js