Это еще один из моих постов (опять же в качестве личной заметки для себя), как печатать на термопринтере. Ранее я писал похожий пост о том, как печатать с помощью Python. Однако в этом посте мы будем работать только с Javascript, особая благодарность node-escpos!
Моя среда:
- macOS High Sierra
- узел v13.3.0
- npm v6.13.1
- узел-escpos v2.5.2
- Я использую термопринтер RP 3220 star.
Если у вас возникла проблема при установке пакета node-escpos, как у меня изначально, вам может потребоваться использовать пакет electronic-rebuild, чтобы исправить это, о чем мы поговорим позже.
Давайте начнем!
Мы начнем с создания проекта Vue, затем сделаем его электронным приложением и, наконец, установим пакет node-escpos для печати на термопринтере.
Проект Vue
Сначала создайте проект Vue с помощью Vue CLI. Я выбираю параметры по умолчанию для создания проекта:
vue create vue-electron-printПосле того, как это будет сделано, давайте проверим новый проект.
cd vue-electron-print yarn serve
Теперь откройте веб-приложение, посетив URL-адрес, отображаемый на терминале!
Когда вы будете удовлетворены просмотром своей новой классной страницы, давайте изменим ее до минимума.
Отредактируйте свой App.vue:
// App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<h1>Hello World!</h1>
<p>Let's print awesomeness.</p>
<button @click="printPaper">Print Paper!</button>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
printPaper() {
console.log('printPaper!')
}
}
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Это будет выглядеть так:
Электронное приложение
Теперь, когда он сведен к минимуму, давайте добавим электрон в наш потрясающий проект, используя очень простой и понятный плагин… Vue CLI Plugin Electron Builder! Он добавит новый файл background.js в папку вашего проекта, который необходим для электронного приложения. Для этого урока я буду использовать последнюю версию Electron, которая на сегодняшний день для этого плагина - v6.0.0.
vue add electron-builder
Чтобы запустить сервер разработки, выполните эту команду, и вы увидите всплывающее окно с вашим электронным приложением!
yarn electron:serve
Распечатать распечатать распечатать!
Теперь, когда мы вышли из ограниченного мира конкретного браузера, мы можем использовать истинную мощь Node.js с нашим электронным приложением.
Установите пакет, отвечающий за печать на термопринтере
npm i escpos --save
Вы можете получить следующие ошибки:
Но мы можем продолжить и импортировать пакет, чтобы протестировать пакет node-escpos.
Отредактируйте свой background.js:
...
const escpos = require('escpos');
...
...
...
setTimeout(() => {
console.log('test print start')
// Select the adapter based on your printer type
const device = new escpos.USB();
// const device = new escpos.Network('localhost');
// const device = new escpos.Serial('/dev/usb/lp0');
const options = { encoding: "GB18030" /* default */ }
// encoding is optional
const printer = new escpos.Printer(device, options);
device.open(function(){
printer
.font('a')
.align('ct')
.style('bu')
.size(1, 1)
.text('The quick brown fox jumps over the lazy dog')
.text('敏捷的棕色狐狸跳过懒狗')
.barcode('1234567', 'EAN8')
.table(["One", "Two", "Three"])
.tableCustom([
{ text:"Left", align:"LEFT", width:0.33 },
{ text:"Center", align:"CENTER", width:0.33},
{ text:"Right", align:"RIGHT", width:0.33 }
])
.qrimage('https://github.com/song940/node-escpos', function(err){
this.cut();
this.close();
});
});
console.log('test print end')
}, 3000)
И снова запускаем электронное приложение:
yarn electron:serve
Опять же, вы можете получить эту ошибку:
ERROR Failed to compile with 1 errors 8:00:53 PM This dependency was not found: * node-bluetooth in ./node_modules/escpos/adapter/bluetooth.js To install it, you can run: npm install — save node-bluetooth ERROR Build failed with errors. error Command failed with exit code 1.
Однако давайте продолжим, а если нет, то создадим новый vue.config.js файл в корневом каталоге и добавим его в файл:
module.exports = {
pluginOptions: {
electronBuilder: {
// List native deps here if they don't work
externals: ['escpos'],
// If you are using Yarn Workspaces, you may have multiple node_modules folders
// List them all here so that VCP Electron Builder can find them
nodeModulesPath: []
}
}
}
И снова запустите приложение, и на этот раз вы получите такую ошибку:
Теперь есть еще кое-что, что нужно сделать, как сказано в этом сообщении Stackoverflow:
- Требовать наличия всех необходимых зависимостей в файле
main.js, который запускается электроном. (мы это уже сделали.) - Запустите
npm i -D electron-rebuild, чтобы добавить пакет electronics-rebuild. - Удалите папку
node-modules, а также файлpackages-lock.json. - Запустите
npm i, чтобы установить все модули. - Запустите
./node_modules/.bin/electron-rebuild, чтобы все перестроить
А теперь запустим приложение!
yarn electron:serve
И вот!!! Приложение работает, а также печать!
Вы также можете получать эти ошибки, “Could not find a package.json for …”:
Для этого нам придется удалить nodeModulesPath из vue.config.js, поскольку нам не нужно настраивать эту конфигурацию. Итак, это последний vue.config.js:
module.exports = {
pluginOptions: {
electronBuilder: {
externals: ['escpos'],
}
}
}
Теперь давайте очистим наш background.js и переместим весь node-escpos код в App.vue, а также обновим наш код:
// App.vue
...
...
<script>
import escpos from 'escpos'
export default {
name: 'app',
methods: {
printPaper() {
console.log('printPaper! start')
const device = new escpos.USB();
const options = {encoding: "GB18030" /* default */}
const printer = new escpos.Printer(device, options);
device.open(function () {
printer
.font('a')
.align('ct')
.style('bu')
.size(1, 1)
.text('Hello world!')
.text('Welcome to the Awesome-land!!!')
.cut()
.close()
});
console.log('printPaper! end')
}
}
}
</script>
...
...
Запустите свое приложение! А если вы нажмете кнопку Print Paper, вы получите печатную версию awesomeness!
На этом пока все! Увидимся, когда увижу! 🤗
