开源vue-plugin-hiprint 只能调起浏览器系统打印，根本不能socket.io客户端直接打印

原创

已于 2024-03-16 02:49:45 修改 · 3.3k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#开源 #vue.js #javascript

于 2024-03-10 16:46:05 首次发布

文章讲述了在Vue项目中遇到静默打印问题，通过在`public/index.html`中添加`print-lock.css`解决了问题。作者分析了问题可能出在vue-plugin-hiprint的打包配置中，由于开源库可能屏蔽了静默打印功能。

经过调试，最终解决办法是：vue项目public\index.html 加入

<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>/print-lock.css?v=1.0.0">

不重叠了、也能静默打印了，文档没有研究明白，技术太菜，大家伙原谅下。

index.vue demo代码

<template>
    <div>
            <button @click="getPrinterList">获取打印机列表</button>
            <button @click="confirmPrintPrint">打印</button>
          <div id="printDiv" style="display: none;">
          <!-- 这里打印内容 style 内容大小一定要小于 实际纸张大小，如果打印的纸张够大 可以忽略 -->
            <div style="zoom: 1.1;display: inline-block;width: 18mm;height: 7mm;margin-left: 5px;">
              <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAA-太长了，自己随便找图转换一下" style="width: 100%; height: 100%;">
            </div>
          </div>
    </div>
  </template>
  
  <script>
  import