首页 > 其他分享 >vue打印模版模块,使用vue-plugin-hiprint插件搭建过程

vue打印模版模块,使用vue-plugin-hiprint插件搭建过程

时间:2024-09-09 12:52:17浏览次数:10  
标签:hiprint 插件 vue 模版 打印 res import

文章目录

概要

项目中,我们可能需要实现打印的需求功能,而打印时,用户可以先去编辑打印模版,这样再其他模版,只需要提供数据,就可以使用模版进行打印。

例如:

发货单模版的编辑与使用,如图所示。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装插件

vue-plugin-hiprint

npm i -S vue-plugin-hiprint

在这里插入图片描述

引入全局样式

打印样式print-lock.css必须正确引入
注意:文章里涉及到的一些文件会在文章下方提供下载链接。
在这里插入图片描述

引入字体图标库

注意:文章里涉及到的一些文件会在文章下方提供下载链接。
在这里插入图片描述

完整demo

index.vue
注意:文章里涉及到的一些文件会在文章下方提供下载链接。
在这里插入图片描述

<template>
  <div class="flex-col">
    <div
      class="printTitle"
      style="margin-bottom: 10px; background-color: white; padding: 3px 0"
    >
      <h4 style="margin-left: 10px; display: inline-block">
        {
   {
    demo }}模版名称:<el-input
          v-model="input"
          placeholder="请输入标题"
        ></el-input>
      </h4>
      <button class="api circle-10 ml-10" @click.stop="exportJson">
        <i class="iconfont sv-save" />
        保存
      </button>
    </div>
    <div class="flex-row" style="height: 87vh">
      <div class="flex-2 left">
        <div class="flex-row justify-center flex-wrap">
          <div
            id="provider-container2"
            class="container custom-style-types"
          ></div>
          <div class="title">辅助元素</div>
          <div class="ep-draggable-item item" tid="defaultModule.hline">
            <i class="iconfont sv-hline" />
            <span>横线</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.vline">
            <i class="iconfont sv-vline" />
            <span>竖线</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.rect">
            <i class="iconfont sv-rect" />
            <span>矩形</span>
          </div>
          <div class="ep-draggable-item item" tid="defaultModule.oval">
            <i class="iconfont sv-oval" />
            <span>圆形</span>
          </div>
        </div>
      </div>
      <div class="flex-5 center">
        <!-- 设计器的 容器 -->
        <div id="hiprint-printTemplate"></div>
      </div>
      <div class="flex-2 right">
        <!-- 元素参数的 容器 -->
        <div id="PrintElementOptionSetting"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
    hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import {
    provider3 } from "./provider3";
import {
    provider2 } from "./provider2";
import {
    provider1 } from "./provider1";
import {
    newHiprintPrintTemplate } from "../../utils/template-helper";
import {
    getPrintDetail, savePrint, updatePrint } from "@/api/print";
export default {
   
  props: ["id", "type"],
  name: "start-01",
  data() {
   
    return {
   
      hiprintTemplate: null,
      input: "",
      template: null,
      provider: null,
      demo: "",
    };
  },
  methods: {
   
    /**
     * 构建左侧可拖拽元素
     * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
     * 而且 必须包含 class="ep-draggable-item" 否则无法拖拽进设计器
     */
    buildLeftElement() {
   
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
      $("#provider-container2").empty(); // 先清空, 避免重复构建
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.build(
        $("#provider-container2"),
        "providerModule2"
      );
    },
    buildDesigner() {
   
      if (this.id != 0) {
   
        getPrintDetail({
    id: this.id }).then((res) => {
   
          this.input = res.name;
          this.template = JSON.parse(res.content);
          console.log("temp", JSON.parse(res.content));

          // eslint-disable-next-line no-undef
          $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
          // this.hiprintTemplate = new hiprint.PrintTemplate({<

标签:hiprint,插件,vue,模版,打印,res,import
From: https://blog.csdn.net/qq_14852047/article/details/142054514

相关文章

  • SprinBoot+Vue兼职发布平台的设计与实现
    目录1项目介绍2项目截图3核心代码3.1Controller3.2Service3.3Dao3.4application.yml3.5SpringbootApplication3.5Vue4数据库表设计5文档参考6计算机毕设选题推荐7源码获取1项目介绍博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作者,全网30w......
  • Vue3学习汇总(路由篇)
    1.单一页面设计常用存在导航栏和内容区,导航栏路由分配,内容区呈现组件内容;<template><divclass="app"><h2class="title">vue路由测试</h2><!--导航区--><divclass="navigate"><RouterLinkto="/h......
  • 组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态、组态软件、组态编辑器)
     一、什么是组态软件组态软件是一种用于创建、配置和管理监控和控制系统的软件工具。组态是指不需要编写计算机程序、通过配置的方式完成工业应用开发的系统。它们通常用于工业自动化领域,用于实时监视和控制工业过程。组态软件提供了丰富的功能和工具,使用户能够创建用户界......
  • vue2+elementUI+Django实现登录注册功能
     前端代码<template><el-rowtype="flex"justify="center"style="height:100vh;"><el-col:xs="24":sm="12":md="8":lg="6"><el-cardclass="login-card......
  • 基于SpringBoot+Vue+MySQL的足球俱乐部管理系统
    系统展示用户前台界面管理员后台界面系统背景  如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统足球俱乐部管理系统信息管理难度大,容错率低,管理......
  • 基于SpringBoot+Vue+MySQL的牙科医就诊管理系统
    系统展示用户前台界面管理员后台界面系统背景  当前社会各行业领域竞争压力非常大,随着当前时代的信息化,科学化发展,让社会各行业领域都争相使用新的信息技术,对行业内的各种相关数据进行科学化,规范化管理。这样的大环境让那些止步不前,不接受信息改革带来的......
  • 【更新日志】AI运动识别插件又双叕发布更新了,v1.5.4版已正式发布。
    Ai运动识别插件可以为您的小程序赋于原生的人体检测、运动识别、姿态识别、运动计时计数AI能力,让您的小程序轻松实现AI健身、线上运动会、学生体测等场景,并拥有大量的用户案例,针对近期开发者的反馈,我们修复了相关问题,并对部分功能进行了优化增强,发布了v1.5.4版。本次版本的详细......
  • 基于java+springboot+vue音乐翻唱网站与分享平台(源码+LW+部署讲解)
    前言......
  • 基于java+springboot+vue疫情网课管理系统(源码+LW+部署讲解)
    前言......
  • 超轻量级、支持插件的 .NET 网络通信框架
    前言给大家推荐一个轻量级的、支持插件的综合网络通信库:TouchSocket。TouchSocket的基础通信功能包括TCP、UDP、SSL、RPC和HTTP。其中,HTTP服务器支持WebSocket、静态网页、XML-RPC、WebAPI和JSON-RPC等扩展插件。此外,TouchSocket还支持自定义协议的TouchRPC,具备SSL......