vue2使用electron-builder打包-使用electron的api实现文件下载

本项目用的是vue2版本开发,最后使用electron-builder打包成桌面应用程序

一、需求描述

1、用户点击按钮,下载html文件

2、代码

复制代码
exportHtml() {
//.html是放在public文件夹下面的本地文件
      axios.get("/html/合同模板.html").then(res => {
        let a = document.createElement("a");
        let url = window.URL.createObjectURL(
          new Blob([res.data], {
            type: "text/html;charset='utf-8'" //这里指定的type对于桌面应用程序不生效,对浏览器有用
          })
        );
        a.href = url;
        a.download = "合同模板.html";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
  • 浏览器下载

  • 桌面应用程序下载

    二、优化需求:保存类型为.html类型,弹窗的标题改为"另存为"

    大概思路介绍: 点击下载按钮时在vue页面使用dialog弹窗,自定义title和文件类型,保存时,在vue页面使用electronipcRenderer与主进程(background.js)通信,将下载文件的数据信息传过去,在主进程中保存文件。

1、 安装electron: npm install -s electron (本项目使用11的版本)"electron": "^11.5.0"

2、在background.js中配置

复制代码
 async function createWindow() {
  win = new BrowserWindow({
    width: 1200,
    height: 800,
    icon:path.join(__dirname,'favicon.ico'),
    webPreferences: {
      nodeIntegration:true,// process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule:true  //启用Remote模块
    },
   
  })

3、vue中引入(main.js)

复制代码
//electron需要打开,如果只是单纯的运行vue项目浏览器会报错
const electron = window.require('electron')
const remote = window.require("electron").remote
Vue.prototype.$electron = electron
Vue.prototype.$remote = remote

4、在需要导出文件的.vue页面使用

复制代码
exportHtml() {
      axios.get("/html/合同模板.html").then(res => {
         let url = window.URL.createObjectURL(
          new Blob([res.data], {
            type: "text/html"
          })
        );
        //使用remote模块的dialog
       this.$remote.dialog.showSaveDialog(
        {
          title: "另存为",
          filters: [
            { name: ".html", extensions: [".html"] } //另存为的数据类型
          ],
          defaultPath: `${this.fileName}.html`  //这个是文件名称,后面必须要加上.html后缀
        }).then(res=>{
		  	//变量值
           const obj = {
            url: url,
            filePath: res.filePath 
           }
           this.$electron.ipcRenderer.send('sendFile',JSON.stringify(obj))  
         }).catch((err)=>{
          console.log("err",err)
        })
       
      });
    },

5、在background.js页面接收

复制代码
import {  ipcMain } from 'electron'
ipcMain.on('sendFile',(event,arg)=>{
  const data = JSON.parse(arg)
  if(data.filePath){
    win.webContents.downloadURL(data.url); 
  }
  win.webContents.session.once('will-download', (event, item, webContents) => {
    if (!data.filePath) return;
    //设置下载项的保存文件路径
    item.setSavePath(data.filePath);
	});
})
相关推荐
haaaaaaarry17 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong1 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
我是ed.2 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
前端Hardy3 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
Tminihu3 小时前
前端大文件上传的时候,采用切片上传的方式,如果断网了,应该如何处理
前端·javascript
颜酱3 小时前
理解vue3中的compiler-core
前端·javascript·vue.js
果粒chenl4 小时前
06-原型和原型链
前端·javascript·原型模式
Entropy-Lee4 小时前
JavaScript语法、关键字和变量
开发语言·javascript·ecmascript