<script language="javascript" src="LodopFuncs.js"></script>

var LODOP=getLodop();//直接这样就得到了打印控件对象

PRINT_INIT(strPrintTaskName)//打印初始化
SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)//设定纸张大小
ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)//增加超文本项
ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)//增加纯文本项
ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)//增加表格项
ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)//画图形
SET_PRINT_STYLE(strStyleName, varStyleValue)//设置对象风格
PREVIEW()//打印预览
PRINT()//直接打印
PRINT_SETUP()//打印维护
PRINT_DESIGN()//打印设计

<script language="javascript" type="text/javascript"> 
 var LODOP; //声明为全局变量 
	function myPrint() {		 
		CreatePrintPage(); 
		LODOP.PRINT();		 
	}; 
	function CreatePrintPage() { 
		LODOP=getLodop(); 
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片"); 
		LODOP.ADD_PRINT_RECT(10,55,360,220,0,1); 
		LODOP.SET_PRINT_STYLE("FontSize",11); 
		LODOP.ADD_PRINT_TEXT(20,180,100,25,"郭德强"); 
		LODOP.SET_PRINT_STYLEA(2,"FontName","隶书"); 
		LODOP.SET_PRINT_STYLEA(2,"FontSize",15);		 
		LODOP.ADD_PRINT_TEXT(53,187,75,20,"科学家"); 
		LODOP.ADD_PRINT_TEXT(100,131,272,20,"地址：中国北京社会科学院附近东大街西胡同"); 
		LODOP.ADD_PRINT_TEXT(138,132,166,20,"电话：010-88811888");	 
	}; 
</script> 

//直接将idName的内容打印出来
var strHtml = document.getElementById("idName").innerHTML
LODOP.ADD_PRINT_HTM(10,55,"100%","100%",strHtml);

开需要的科目课本或资料文章

或者直接复制粘贴打印。

领取免费课本、资料、同步教学视频。

ue-Plugin-HiPrint 是一个Vue.js的插件，旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint，您可以轻松地在Vue.js应用程序中实现高度定制的打印功能。但是本文只简单介绍 Vue-Plugin-HiPrint 在vue3中如何使用固定模板打印的使用方法，以便可以快速集成并使用它。

安装 Vue-Plugin-HiPrint

要开始使用 Vue-Plugin-HiPrint，首先需要安装它。您可以使用 npm 或 yarn 进行安装：

npm install vue-plugin-hiprint --save
# 或
yarn add vue-plugin-hiprint

在 Vue 项目中引入 Vue-Plugin-HiPrint

安装完成后，您需要在您的 Vue 项目中引入 Vue-Plugin-HiPrint。在您的 main.js 或任何其他入口文件中，您可以按以下方式引入它：

1、main.js中引入

import Vue from 'vue';
import VuePluginHiPrint from 'vue-plugin-hiprint';

Vue.use(VuePluginHiPrint);

这会将 Vue-Plugin-HiPrint 注册为 Vue 插件，使其可用于您的整个应用程序。

2、组件中引入

import {hiPrintPlugin } from 'vue-plugin-hiprint'

创建打印模板

在开始打印之前，您需要创建打印模板。Vue-Plugin-HiPrint 使用 HiPrint 作为底层打印引擎，它支持使用 HTML 和 CSS 创建高度自定义的打印模板。您可以创建一个包含您想要打印的内容的 HTML 模板，然后使用 CSS 样式进行格式化。

请去demo预览里创建一个适合业务需求的打印模板：

在 Vue 组件中使用打印

一旦您创建了打印模板，您可以在您的 Vue 组件中使用 Vue-Plugin-HiPrint 来触发打印操作。首先，先要在项目的index.html文件中引入print-lock.css样式文件，这个文件在node_modules/vue-plugin-hiprint/dist/目录下：

<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
<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="/print-lock.css">

接下来，是在组件中的使用方法：

import {hiPrintPlugin } from 'vue-plugin-hiprint'
hiPrintPlugin.disAutoConnect();  //取消自动打印直接连接客户端
hiprint.init(); 

在组件中我们需要先取消它的自动连接客户端打印功能，然后初始化vue-plugin-hiprint。

自定义打印模板

Vue-Plugin-HiPrint 允许您自定义打印样式，以满足您的具体需求。您可以在 预览网站中设计好需要的样式并复制自定义模板的JSON数据，在项目中新建mb.json文件将模板json数据粘贴进去。

使用模板

import mb from './mb.json'
function orderPrint(){
let printData = {orderId:'单号',title:'模板标题',table:[{NAME:'表格数据'}]};
let hiprintTemplate = new hiprint.PrintTemplate({ template: mb});
// 打印
hiprintTemplate.print(printData);
}

在上面的示例中，我们使用import引入了自定义模板，使用printData自定义了表单具体数据，最后使用print方法完美实现了打印。

结语

Vue-Plugin-HiPrint 提供了一个强大的、易于使用的打印解决方案，适用于 Vue.js 应用程序。通过创建自定义的打印模板和使用 Vue-Plugin-HiPrint，您可以轻松地实现高度定制的打印功能，满足您的项目需求。如果您正在寻找一个方便的 Vue.js 打印解决方案，Vue-Plugin-HiPrint 是一个值得尝试的工具。

原文链接：https://juejin.cn/post/7297080018655412250