Electron with Vue 框架搭建及打印功能分享

最新推荐文章于 2024-04-24 10:16:50 发布
最新推荐文章于 2024-04-24 10:16:50 发布
阅读量2.1k 收藏 3
点赞数 3
分类专栏： Electron with Vue 文章标签： electron vue electron框架 electron打印 electron窗口通讯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Michaelcsd/article/details/101770897
版权

Electron with Vue 框架搭建及打印功能分享

2019.09.27
文档有改进地方，欢迎提出。

安装

  1. 准备工作：确保本机已经安装了nodejs && npm

  2. 检查本地是否已经安装了vue：npm view vue version；否则先安装vue：npm install vue

  3. 创建一个electron-vue的demo项目：vue create electron-vue-demo

  4. 安装配置：

    ? Please pick a preset:
  default (babel, eslint)
> Manually select features

    ? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

    Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

    ? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

    ? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

    Save this as a preset for future projects? (y/N) N

    此处安装过程需要大约2分钟（视网络决定）

  5. 进入项目目录：cd electron-vue-demo

  6. 启动 Vue.js App 项目：npm run serve，打开浏览器登入：http://localhost:8080/

  7. 安装electron构建包：vue add electron-builder

    使用打印机必须要使用electron 3.0或以下版本，此处先任意选择安装，后续单独更换electron版本。

    npm uninstall electron && npm install electron@3.1.13 --save-dev

    ? Choose Electron Version (Use arrow keys)
  ^4.0.0
  ^5.0.0
> ^6.0.0

    electron包文件较大，此处安装过程耗时较长，建议使用淘宝镜像cnpm安装。

  8. 由于electron将版本的问题，./src/background.js中有一处需要更改配置，否则启动不了electron。

    //删除第15行： 
// protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }])
//新增一行：
protocol.registerStandardSchemes(['app'], { secure: true })

  9. 启动electron项目：npm run electron:serve
    在这里插入图片描述

  10. 默认配置了热加载，代码保存后，electron窗口会体现最新效果。

搭建框架

  1. 安装axios：npm install axios --save-dev

  2. 封装数据请求方法：

    新建文件夹：./src/axios/

    新建文件并粘贴代码：

    api.js

    import requestAll from "./request"; //引用fetch,js

import apiHeader from './url'; //引用url.js

// 数据请求

export function Axios(method, api, params = {}) { 
  let header = '';
  header = apiHeader.server;
  // 浏览器访问
  if( !window.require ) {
    header = '/api';
  }
  // electron访问
  return requestAll.Request(header+api, params, method)
}

    request.js

    import axios from 'axios';//引入axios

// post请求
function Request(url, data = {}, method = 'post') {
  return new Promise((resolve, reject) => {
    axios({
      url: url,
      method: method,
      headers: {
        'Content-Type': 'application/json'
      },
      timeout: 30 * 1000, // 30秒超时
      data: data
    })
      .then(res => {
        // 统一错误状态码
        let errorMessage = '操作失败！';
        switch (res.data.code) {
          case 200: errorMessage = '请求成功'; break;
          case 501: errorMessage = '参数异常'; break;
        }
        res.data.errorMessage = errorMessage;
        //成功
        resolve(res.data)
      })
      .catch(res => {
        //失败
        reject(res)
      })
  })
}

export default {
  Request: Request
}

    url.js

    export default {

  server: 'http://127.0.0.1:12306'

}

    使用方法：

    // 引入封装好的axios方法
import { Axios } from "../axios/api";
// 使用例子
Axios("post", url, params)
    .then(res => {
        if (res.code === 200) {
            resolve(res.data);
        } else {
            _this.$alert(res.errorMessage, "提示", {
                confirmButtonText: "知道了"
            });
        }
    })
    .catch(err => {
        reject();
        _this.$alert(`发生错误！\n${err}`, "提示", {
            confirmButtonText: "知道了"
    });
});

    浏览器访问项目时，会遇到请求跨域问题，解决方法（./vue.config.js文件内容）：

    // vue.config.js相关代码
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

  3. 路由设置：

    ./src/router.js

    import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue'),
      children: [
        {
          path: '/',
          redirect: 'test'
        },
        {
          path: '/test',
          name: 'test',
          component: () => import('./components/Test.vue') // 主窗口里面的子组件
        }
      ]
    },
    {
      path: '/setUp',
      name: 'setUp',
      component: () => import('./components/SetUp') // 其他窗口的页面文件
    }
  ]
})

窗口设置

  1. 对这个文件进行编写配置：./src/background.js

  2. 引入electron中的ipcMain：

    import { ipcMain } from 'electron'

  3. 主窗口在项目初始化已经设置好，基本配置如下：

    function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1336, // 窗体宽度
    height: 890, // 窗体高度
    frame: false, // 窗体是否需要标题栏
    resizable: false, // 窗口是否可以改变尺寸
    webPreferences: {
      nodeIntegration: true, // 是否集成Node
      webSecurity: false  // 解决跨域问题
    }
  })
}

    具体更多窗口配置：https://electronjs.org/docs/api/browser-window

  4. electron启动后执行createWindow方法：

    // This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installVueDevtools()
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

  5. 设置窗口访问的页面（写在createWindow方法内）

    if (process.env.WEBPACK_DEV_SERVER_URL) { // 如果是开发模式
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    testWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + "/#/test")
    // 如果是开发模式，自动打开开发者调试工具
    if (!process.env.IS_TEST) win.webContents.openDevTools()
    if (!process.env.IS_TEST) testWindow.webContents.openDevTools()
} else {	// 如果是打包模式
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
    testWindow.loadURL('app://./index.html#/test')
}

  6. 设置窗口，开启关闭功能（在createWindow方法内）

    win.on('closed', () => {
    win = null
})

testWindow.on('close', (e) => {
    e.preventDefault()
    testWindow.hide();
})

打开和关闭窗口

  1. 文件./src/background.js添加窗口的打开和关闭监听：

    // 打开窗口 
ipcMain.on('open-test', (event, arg) => {
  testWindow.show();
  testWindow.webContents.send('param', arg)	// 触发这个事件时，传递给将要打开的窗口一个数据
})
// 关闭窗口
ipcMain.on('close-test', function () {
  testWindow.hide();
})

  2. .vue文件里触发窗口的打开或关闭事件：

    const { ipcRenderer } = require("electron");	// 文件头部新建electron控制窗口的上下文对象

ipcRenderer.send( "open-testEdit", { data: this.data } );	// 打开窗口命令，"open-testEdit"是"background.js"文件中添加的事件监听，send的第二个参数是传递给窗口的数据对象

ipcRenderer.send("close-testEdit");	// 关闭窗口

窗口之间的通讯

  1. 可以利用electron中的ipcRenderer.send方法给窗口传递数据；当然，在触发打开或关闭窗口的时候也可以传递数据，因为他们都在使用ipcRenderer.send方法。

  2. 如果是单纯传递数据（非窗口打开或关闭），可以这样做：

    // 首先在文件"./src/background.js"中定义监听方法
ipcMain.on('testChange', (event, message) => {
  win.webContents.send('getTestData', message);
});	// 当任何页面触发'testChange'方法时，win窗口可以接收到message这份数据

// 注意：接收数据的窗口（.vue页面），同时需要做好接收数据的工作
mounted() {
    // 需要使用electron的ipcRenderer.on方法，参数1：接收数据事件名称，参数2：接收数据或event的方法体
    ipcRenderer.on("getTestData", (e, message) => {
        console.log( message );
    });
},

构建软件包

  1. ./package.json中给打包操作设置参数

    {
    "name": "WondfoDMS-Pet",		// 项目名称（主要应用在软件运行中的名称）
	"productName": "WondfoDMS-Pet",	// 软件包名称（安装包上的名称）
	"version": "6.6.6",			   // 软件版本号
	"scripts": {
            "electron:build": "vue-cli-service electron:build --windows --dir --ia32",
            /*
             *参数意义：
             *@ --windows 打包成window软件包
             *@ --dir      
             *@ --ia32    软件包为32位
             */
  	},
    "win": {
      "icon": "icon.ico",			   // 软件包图标，图标放置于项目根目录，尺寸为256*256
      "extraResources": "./public"	    // 页面项目静态文件入口放置的位置
    }
}

  2. 执行命令npm run electron:build即可打包，软件位置：./dist_electron/win-ia32-unpacked/*.exe

Electron如何实现打印(未完善)

  1. 新建打印中转页面printContent（有关页面路由router配置，此处不讲述），内容：

    <template>
  <div class="component">
    <webview id="printWebview" ref="printWebview" :src="fullPath" nodeintegration />
  </div>
</template>
<script>
const { ipcRenderer } = require("electron");
import path from "path";

export default {
  name: "printContent",
  data() {
    return {
      printList: [],
      printDeviceName: "",
      fullPath: path.join(__static, "print.html"),
      messageBox: null,
      htmlData: {},
      isAllowPrint: false
    };
  },
  mounted() {
    const webview = this.$refs.printWebview;
    webview.addEventListener("ipc-message", event => {
      if (!this.isAllowPrint) return;
      if (event.channel === "webview-print-do") {
        webview.print(
          {
            silent: true,
            printBackground: true,
            deviceName: this.printDeviceName
          },
          data => {
            if (data) {
              this.$message({
                message: "打印成功！",
                type: "success"
              });
            } else {
              this.$alert("打印失败！", "提示", {
                confirmButtonText: "知道了"
              });
            }
          }
        );
      }
    });
  },
  methods: {
    print(data, isAllowPrint) {
      this.htmlData = data;
      // 设置打印机名称
      this.printDeviceName = this.htmlData.printDeviceName;
      this.isAllowPrint = isAllowPrint;
      this.printRender();
    },
    printRender() {
      // 获取<webview>节点
      const webview = this.$refs.printWebview;
      // 发送信息到<webview>里的页面
      webview.send("webview-print-render", {
        printName: this.htmlData.printDeviceName,
        data: this.htmlData
      });
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
webview {
  width: 100%;
  height: 100%;
}
</style>

  2. 文件 ./src/background.js中需要新建获取打印列表事件的监听：

    // 获取打印列表
ipcMain.on('getPrinterList', (event) => {
  //主线程获取打印机列表
  const list = printWindow.webContents.getPrinters();
  //通过webContents发送事件到渲染线程，同时将打印机列表也传过去
  printWindow.webContents.send('printerList', list);
});

  3. 触发打印的页面（即打印按钮的页面）：

    <template>
  <div class="component">
    <div class="content">
      <el-form :inline="true" size="small" label-width="108px">
        <el-form-item class="form_item_btn">
		 <!-- 打印按钮 -->
          <el-button type="primary" @click="doPrint()">打印</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="16" style="height:540px;">   
		 <!-- 打印预览 -->
          <pinter ref="print" :html-data="HtmlData" class="print_preview"></pinter>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
const { ipcRenderer } = require("electron");
import Pinter from "./PrintContent.vue"; // 引用上面新建的组件

export default {
  name: "test",
  components: {
    Pinter
  },
  data() {
    return {
      HtmlData: "",
      selectedPrinter: "",
    };
  },
  mounted() {
    // 获取打印列表
    ipcRenderer.send("getPrinterList");
    ipcRenderer.on("printerList", (e, message) => {
      // 设置打印机名字
      this.selectedPrinter = message[0].name; // 可在页面给予选择打印机功能，此处不讲述
    });
  },
  methods: {
    // 触发打印事件
    doPrint() {
        this.HtmlData = '打印数据';
        this.$refs.print.print(this.HtmlData);
    }
  }
};
</script>

  4. 新建预览文件（同时也是打印模版文件，关键！）：./public/print.html

    <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 如果需要使用第三方组件，需要额外放置组件文件在public中，并引用 -->
  <link rel="stylesheet" href="./element-ui.css" type="text/css" />
  <script src="./vue.js"></script>
  <script src="./element-ui.js"></script>
  <!-- 引用本页面css -->
  <link rel="stylesheet" href="./print_preview.css" type="text/css" />
</head>
<body id='bd'>
    <div id="app">
        打印内容
    </div>
	<script>
    // 具体数据渲染，根据实际业务开发
    new Vue({
      el: '#app',
      data: function () {
        return { data: '' // 本页需要的数据 }
      },
      mounted() {
        const { ipcRenderer } = require('electron')
        // 接收打印数据 参数2：第1步中给webview发送的数据{ printName, data }
        ipcRenderer.on('webview-print-render', (event, data) => {
          this.data = data.data;
          ipcRenderer.sendToHost('webview-print-do');
        });
      }
    })
  </script>
</body>
</html>

打印功能参考：https://juejin.im/post/5bf8b580e51d4522143b7b03

附录

框架搭建参考视频：https://www.youtube.com/watch?v=Fl7—SEORQ

electron构建的第三方包源码：https://github.com/nklayman/vue-cli-plugin-electron-builder

小前端Michael
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element小票打印、58小票打印机
luolinyin的专栏
10-09 2596
1、组件webview <template> <div class="page"> <!-- 打印视图 --> <webview class="webview" src="/static/print_order.html" nodeintegration> </webview> <!-- 打印视图 --> </div> </template>
Electron 打印功能的实现
半吊子伯爵的博客
05-26 863
Electron中的打印功能有以下几种方式：webContents的print和printToPDF方法、webview标签的print和printToPDF方法、iframe的print方法。关于print方法，webContents、webview和iframe都是调用的浏览器自带的打印功能，虽然Electron文档中罗列了很多打印配置项，但实际使用时看不到实际效果，打印的最终效果也较差。而printToPDF方法效果就好很多。
vite-electron 静默打印功能实现
pixle的博客
04-23 1412
本文将介绍基于electron-vite构建工具下vue3项目内如何实现打印机静默打印功能，并以热敏打印机打印二维码为示例用代码实现该功能。
记一次Electron 桌面应用实现调用打印机打印小票功能
Tsinbo1314的博客
07-07 8216
实现一款交互屏桌面应用软件，类似医院那张种给用户操作办理业务的应用程序。操作业务中在充值后可供用户打印小票。electron静默打印
Electron 使用打印机
w_231210的博客
08-30 1117
2.开发环境： electron12 + vue2 + node14。使用原生自带的 webview.print。打印机如果无法打印可以看看是否是驱动未装。1.问题：开发时使用打印机打印小票。
electron + vue项目实现打印小票功能及实现代码
10-17
在电子（Electron）+ Vue 项目中实现打印小票功能，主要涉及到Electron的API使用和Vue组件的配合。以下是对实现这一功能的详细解释： 1. **需求分析**： - 公司项目中可能需要通过Electron应用程序调用用户的系统...
electron + vue项目实现打印小票功能及实现代码.docx
01-13
electron + vue 项目实现打印小票功能是一个基于 electron 和 vue 框架的项目，它的主要目的是实现打印小票的功能。这个项目使用了 electron 的 ipcRenderer 对象和 webview 元素来实现静默打印。 electron 是一个...
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询...
Electron + Vue3 跨平台的桌面应用程序开发框架
最新发布
06-19
使用Vue3+Electron+ElementPlus创建跨平台桌面系统 1.可以动态修改配置服务地址访问 2.打包后可以在安装程序中修改网站或者系统服务地址进行访问 3.可以进行拓展安装到各web平台系统中 4.可以拓展类似浏览器窗口
electron-vue 打印预览功能实现
weixin_49258413的博客
06-05 3414
前言： 最近electron-vue项目中遇到打印功能,但是利用浏览器原生的打印功能(window.print())又无法预览打印界面，用户体验极差。后来偶然发现lodop这个神奇的web打印插件，通过把lodop打印插件整合到项目中,解决了问题。不足的是为此用户需要增加一步安装lodop.exe文件的操作。 先生成图片: lodop的预览功能: 正文开始，接下来说以下具体操作吧。 1. 前往lodop官网下载插件 下载解压后复制LodopFuncs.js到自己的electron-vue项目中(我是
博客使用方法
justwaityou1314的博客
06-09 1556
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
electron 连接打印机打印pdf文件
小漠007的专栏
06-20 3664
类似视图线程两个包都提供了print函数来打印文件，配置基本一致，只是参数形式有所不同，参考：https://www.computerhope.com/unix/ulp.htm#co。
electron+vue 实现静默打印
文和的博客
06-19 1954
实现原理：webview类似于iframe，其实是electron中的一个内嵌窗口，打印的也就是这个内嵌窗口的内容。第一步：在backgroud.js中打开webview，electron5.0后默认停用webview，所以需要在配置文件中配置为默认开启。第二步：vue.config.js中设置html加载器，如果不设置，项目启动后会报无法加载html文件。唯一需要主进程和渲染进程通讯的是获取打印机列表。第四步：vue文件的处理，主要工作包括：数据的预处理，引用html文件，发布打印。
electron的主进程配置
siqi的博客
11-10 635
【代码】electron的主进程配置。
关于Electron+Vue打印小票功能实现（最新）
qq_51091386的博客
11-14 1677
electron打印小票功能实现。
electron实现静默打印（各种踩坑解决）
douluo998的博客
04-24 1478
其他方式要不就是Bug多，官方修复也有问题；不过@24官方已经不支持更新维护了，但是基本没啥问题（打印功能很迷，据说时不时一个版本好，一个版本又坏，然后又好）数据我是通过query传参方式通信，也可以用其他方式（store，cookie等）后期项目还要支持win7，还得降级到@21，没bug不出问题就完事～那么有问题，就肯定不止我一个人遇到，就肯定有。如果是普通下载（非静默），到此就没有问题了。创建打印窗口（显示可预览，隐藏可静默）后，有问题，会缩放很小，而且居中展示。打印功能，使用官方提供。
electron静默打印v_13,webview方式的相关配置
weixin_45758420的博客
12-14 4191
使用electron开发应用遇到了打印小票的功能，实现途中还是几经波折。开始选择了c-lodop这个web打印插件，该说不说啊这个用着是挺方便，他们的服务很多东西也完善，web可以直接打印html，静默打印不用弹出浏览器的打印界面，但打印出来的会有c-lodop的水印 本页由【试用版打印控件...】 。 需要换一种实现了，查到electron有静默打印的方式有两种 第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂 .
记一次Electron+vue实现动态打印小票
qq_52965813的博客
07-26 3477
electron+vue3打印

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值