<!-- index.html --> <head> <!-- 打印样式是必须的,你可以调整成自由链接, 注意 media="print" 名称 print-lock.css --> <link rel="stylesheet" type="text/css" media="print" href="https://unpkg.com/vue-plugin-hiprint@latest/dist/print-lock.css" /> <!-- 下列使用的都是 unpkg提供的...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start ▲本篇效果图 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js ...
let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">' // 2.重写样式:所有文本红色 css += '<style>.hiprint-printElement-text{color:red !important;}</style>' return css } }); 由于打印原理是生成html调用浏览器打印。所以如果批量打...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 效果如下: 1.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI
vue使用hiprint实现打印(vue-plugin-hiprint) 1、安装插件: 1 npm install vue-plugin-hiprint 或 1 yarn add vue-plugin-hiprint 2、普通使用: <template> <div class="box"> <div class="box-tool"> <el-button-group> <el-button type="primary" @click="print">浏览器打印</el-button>...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js import { hiprint } from "vue-plugin-hiprint"; ...
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。 github:https://github.com/CcSimple/vue-plugin-hiprint ...
npm i vue-plugin-hiprint 引入「打印样式」print-lock.css 从node_modules/vue-plugin-hiprint/dist/目录下复制一份print-lock.css到静态资源目录public下 在public/index.html 中添加样式如下图: ▲添加打印样式 ❝ 这个打印样式是必须要引入的,否则会 打印重叠,多出一页。 ❞ 如何检查是否引入成功呢...
npm install vue-plugin-hiprint <!--【必须】在index.html 文件中添加打印所需样式(cdn可能不稳定):--> <link rel="stylesheet" type="text/css" media="print" href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css" /> <!-- OR --> <link rel="stylesheet" type=...
{ hiprint, defaultElementTypeProvider, hiPrintPlugin } from "vue-plugin-hiprint"; import providers from "./providers"; import { requestUrl } from "@/utils/url"; import fontSize from "./font-size.js"; import html2canvas from "html2canvas"; import JSZip from "jszip"; // hiPrintPlugin ...