Printing functionality typically involved C# clients, where silent printing (without a print dialog) was straightforward.
However, implementing silent printing with a browser as the client is more challenging due to browser restrictions that do not support such changes.
In projects using Vue, a simple solution involves using electron-hiprint.
Instead of the browser directly calling the print control, an application is installed on the corresponding computer, and the browser cals this program.
Browser -> Print Change to Browser -> electron-hiprint -> Print
Verification Start
There are multiple ways to print, such as HTML tables in Vue. For verification, I directly retrieve a PDF from the backend API and print it directly.
Example:
http://localhost:7000/print/download/TESTPDF.PDF
Test: Use the front end to print this address directly.
Install the electron-hiprint Program
Download Address: htps://gitee.com/CcSimple/electron-hiprint/releases
I use a 64-bit Windows system, so I install it.
After installation, open it and configure it.
Only one parameter needs simple configuration:
TOKEN device modified to: TEST_PRINT
At the same time, get the printer name on the computer, if not filled, the default printer will be used.
KONICA MINOLTA 205i
Use electron-hiprint in Vue Project
Install via npm
npm install vue-plugin-hiprint
Or use yarn
yarn add vue-plugin-hiprint
Use in project Note: Specific parameters can refer to the official documentation
Import dependency
// Global import // main.js import { hiPrintPlugin } from 'vue-plugin-hiprint' Vue.use(hiPrintPlugin, '$pluginName')
// Local import import { hiPrintPlugin } from 'vue-plugin-hiprint'
Use dependency
Test by clicking the button on the page, which can directly print.
Issues Occurred
Sometimes, the printer reports an error stating no paper size is specified. This error is visible in the issue https://mp.weixin.qq.com/s/E-ZfuKLH3-GvKn4AosRvaw
Solution: Set printer preferences