vue-plugin-hiprint 打印 预览打印+静默打印

1.安装
npm install vue-plugin-hiprint
npm i socket.io-client --save //为了静默打印 （为此还需安装客户端）

2…html页面 引入css

<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/src/assets/styles/print-lock.css">

3.main.js引入或者按需应用

// 全局引用：
import {hiPrintPlugin,defaultElementTypeProvider } from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
Vue.use(defaultElementTypeProvider, '$defaultElementTypeProvider')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
import '@/assets/styles/hiprint.css' // 自定义 css

4。你要打印的页面引用

<template>
    <div ref="filePath" id="printDiv" >
            <div v-for="(item,index) in filePath" :key="index">
                <div :ref="'filePath'+index">
                    我的打印内容；{{item}}
                </div>
            </div>
        </div>
</template>
<script>
 //为了静默打印  
    import {
        io
    } from "socket.io-client";
    export default {
        data() {
            return {
            ids:[],//存储获取的id
            hiprintTemplate: '',
                filePath: [],
                socket:''
            }
        },
        created() {
         //为了静默打印  //连接静默打印客户端
            this.socket = io("http://192.168.13.16:17521", {
                transports: ["websocket"],
                auth: {
                    token: "vue-plugin-hiprint", // 在此处填入你 client 设置的 token，缺省可留空
                }
            })
            //打印
            const hiprintTemplate_ = new this.$pluginName.PrintTemplate()
            this.hiprintTemplate = hiprintTemplate_
        },
        methods: {
        handlePrints(row) {
                let that = this
                const ids = that.ids;
                //这是我的后端接口
                downloadOneReimbursement(ids).then(res => {
                    that.filePath = res.data.url //我这是一个数组，后端给的地址，我通过在线地址展示成div
                })
                //这里是设置css 的  可以不用要--开始
                that.$confirm('是否选择' + this.ids.length + '条数据进行打印？', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    var elem = document.getElementsByClassName('docx-wrapper');
                    for (var i = 0; i < elem.length; i++) {
                        elem[i].style.padding = '0'
                        elem[i].style.marginBottom = '0'
                    }
                    // elem.style.padding='0'
                    // 假设我们有多个class为'my-class'的元素
                    var elements = document.getElementsByClassName('docx');
            
                    // 遍历这些元素并设置样式
                    for (var i = 0; i < elements.length; i++) {
                        elements[i].style.padding = '15pt 60px';
                        elements[i].style.minHeight = '95vh';
                        elements[i].style.height = 'auto';
                        elements[i].style.boxShadow = '0 0 0 0 #fff'
                    }
                    var elements2 = document.getElementsByTagName('article');
                    for (var i = 0; i < elements2.length; i++) {
                        elements2[i].style.margin = '0 auto'
                    }
                })
                这里是设置css 的  可以不用要--结束

//直接打印其实就是将填充完数据的html 通过socket.io连接发送到直接打印客户端
                setTimeout(function() {
                    that.$confirm('是否立即打印?', "警告", {
                        confirmButtonText: "预览打印",
                        cancelButtonText: "静默打印",
                        type: "warning"
                    }).then(function() {
                        //预览打印
                        that.hiprintTemplate.printByHtml(that.$refs.filePath, {})
                    }).catch(() => {
                        //静默打印
                        that.filePath.forEach((item,index)=>{
                          let ins='filePath'+index
                            //获取html
                            let html=that.$refs[ins][0].outerHTML
                            that.socket.emit("news", {html,pageSize:'A4',printBackground:false});
                        })
                    });
                }, 400)
            },
        }
    }
    </script>

5安装客户端
https://gitee.com/CcSimple/electron-hiprint/releases
下载相应的客户端

安装打印客户端

如果要实现无预览打印(静默打印)就需要安装打印客户端, 无预览打印的原理是使用 hiprint 的打印客户端，它是一个基于 electron 的桌面应用，可以接收来自浏览器的打印请求，然后直接调用本地打印机进行打印。
安装地址:https://gitee.com/CcSimple/electron-hiprint/releases
问题

如果在配置客户端时遇到一下问题

解决方法

然后就可以使用啦!
补充

在使用客户端打印时如果我们的入口文件index.html中有这样的内容

在使用打印时会一同打印出来

解决方法 (在不动原代码的情况下最简单的方法)

参考地址
[1]: https://github.com/CcSimple/electron-hiprint
[2]: https://gitee.com/CcSimple/electron-hiprint
https://www.cnblogs.com/sexintercourse/p/17085140.html
https://mp.weixin.qq.com/s/4N4f7CkxodA-fuTJ_FbkOQ
https://developer.aliyun.com/article/1011031