使用vue-plugin-hiprint实现打印功能

最新推荐文章于 2025-06-27 09:10:16 发布

饺子大王⌯'Ⱉ'⌯

最新推荐文章于 2025-06-27 09:10:16 发布

阅读量2.8k

点赞数 40

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_61634399/article/details/143826091

1.效果图

在这里插入图片描述

2.安装

插件安装

npm i vue-plugin-hiprint

引入样式
复制一份hiprint/css/print-lock.css文件到public中，在index.html中引入

<!-- 防止打印不正常 -->
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css" />

3.引入插件

全局引入

// main.ts
import {
   
    hiPrintPlugin } from 'vue-plugin-hiprint'
app.use(hiPrintPlugin)

局部引入

// 需要使用的的文件中
import {
   
    hiPrintPlugin } from 'vue-plugin-hiprint'

4.完整代码

<template>
  <div class="pageIndex">
    <div class="topBtnBox">
      <div class="paper">
        <!-- 纸张大小 A3、A4 等 -->
        <!-- <template> -->
        <button v-for="(value, type) in paperSize" :key="type" @click="setPaper(type, value)">
          {
  
  { type }}
        </button>
        <!-- </template> -->
        <!-- 自定义纸张 -->
        <button @click="paperPopVisible = !paperPopVisible">自定义纸张</button>
        <!-- 自定义纸张 popover -->
        <div class="popover">
          <div class="popover-content" v-show="paperPopVisible">
            <!-- <div style="font-size: 16px; font-weight: bold">
              设置纸张宽高(mm)
            </div> -->
            <div>
              <input class="input" v-model="paperWidth" type="number" placeholder="宽(mm)" />
              <span>x</span>
              <input class="input" v-model="paperHeight" type="number" placeholder="高(mm)" />
            </div>
            <button @click.stop="setPaperOther">确定</button>
          </div>
        </div>
        <button @click="changeScale('+')">+</button>
        <button @click="changeScale('-')">-</button>
        <input v-model="scaleValue" disabled style="width: 40px; text-align: center" />
        <button @click="changeScale(