2024年Web前端最全【vue】实现打印功能_vue 打印(1)，retrofit教程

2401_84437170

已于 2024-05-04 23:41:52 修改

阅读量670

点赞数 19

分类专栏：程序员文章标签：前端 vue.js retrofit

于 2024-05-04 23:41:51 首次发布

本文链接：https://blog.csdn.net/2401_84437170/article/details/138453660

版权

程序员专栏收录该内容

165 篇文章 0 订阅

订阅专栏

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5



> 
> `分页打印`
> 
> 
>

NB打印

// 方法一 // 使用div包裹需要分页的块使用 css属性 page-break-after:always进行分页

这是第二页


###### 【5】vue-print-nb插件的一些优化



> 
> `去掉页眉页脚`
> 
> 
>



> 
> `打印內容不自动换行问题`
> 
> 
>


###### 【6】注意事项：

（1）无法打印本地图片，当需要打印的部分有本地图片时，打印之后图片不会显示。

（2）使用elementUI表格vxe-table表格打印时，会出现样式问题


###### 二、print.js ：解决了无法打印本地图片的问题


官网地址：<https://printjs.crabbly.com/>


GitHub：<https://github.com/crabbly/Print.js/releases>


###### 【1】安装

npm install print-js --save


###### 【2】使用

import print from ‘print-is’

...

billPrintClick(){
const style = ‘@page {margin:0 10mm};’//打印时去掉眉页眉尾
//打印为什么要去掉眉页眉尾？因为眉页title时打印当前页面的title，相当于是获取html中title标签里面的内容，但是比如我打印的内容只是一个弹框里面的内容，是没有title的，这时候就会出现undefined，为了避免出现这种情况，就可以隐藏眉页眉尾
printJS({
printable: ‘printBill’,// 标签元素id
type: ‘html’,
header: ‘’,
targetStyles: [‘*’],
style
});
//各个配置项
//printable:要打印的id。
//type:可以是 html 、pdf、 json 等。
//properties:是打印json时所需要的数据属性。
//gridHeaderStyle和gridStyle都是打印json时可选的样式。
//repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。
//scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果
//targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
//style:传入自定义样式的字符串，使用在要打印的html页面也就是纸上的样子。
//ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用
},


###### 【3】注意点：


（1）打印预览时样式写法

@media print {
/样式内容/
}


（2）css设置打印时强制分页，使用这个属性，该div的以后的内容就会在打印时分页（此属性在div display属性为flex时无效，使用了浮动float时也会无效）

.print{
page-break-after:always
}


（3）table自动分页

table tr{
page-break-inside:avoid;
page-break-after:auto
}


（4）打印最好使用原生table标签，使用其他ui框架会出现很大的样式问题，使用原生table表格要自己重写表格边框，不然会出现表格边框很粗的情况，预览时看不出来，打印就很明显。在使用了单元格合并也会出现表格边框有的粗有的细的情况，目前还在研究如何解决。


###### 三、lodop打印功能（可以指定打印机）


###### 【1】官网下载


<http://www.lodop.net/download.html>  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6ee92390ee3641f1bea1a1104f72c1e8.png)


###### 【2】解压安装运行


点击CLodop\_Setup\_for\_Win32NT.exe进行安装  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0420386d9b884183843de8fd531b43a3.png)


###### 【3】vue代码实现（具体操作见官网：http://www.lodop.net/faq/pp35.html）


【1】把官方提供的LodopFuncs.js文件保存到项目某个目录下  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/231cd18bd6d9413a91ab195c78a330cc.png)  
 【2】修改LodopFuncs.js文件

//在文件最底部添加一行代码
export { getLodop }; //导出getLodop 把该文件中的getLodop函数 export 出来。

或者

// 改造lodopfuncs.js
//判断是否需要安装clodop云打印服务器:
export function needcLodop(){ … }

//获取lodop对象的主过程：
export function getLodop(oobject,oembed){ … }


【3】所有方法

PRINT_INIT(strPrintTaskName)打印初始化

SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小 (1横向2竖向,宽度,高度,页面大小名称宽高都设置为0的时候才可以设置"A5",“A4”)

ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项

ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项

ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项(strHtml为html模板字符串)

ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形

SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格

PREVIEW打印预览

PRINT直接打印

PRINT_SETUP打印维护

PRINT_DESIGN打印设计


###### 【4】案例

import { getLodop, loadTemp, previewTemp } from “@/utils/LodopFuncs”;

methods: {
openDesign(opt) {
let _self = this;
let LODOP = getLodop();
if (_self.form.content) {
loadTemp(LODOP, _self.form.content);
}
if (opt === 0) {
const tid = LODOP.PRINT_DESIGN();
LODOP.On_Return = function (taskID, value) {
_self.form.content = value;
};
}
if (opt === 1) {
LODOP.PREVIEW();
}
},
}


LodopFuncs.js

var CreatedOKLodop7766 = null;
import {
Message,
MessageBox
} from ‘element-ui’
//判断是否需要安装CLodop云打印服务器:
export function needCLodop() {
try {
var ua = navigator.userAgent;
if (ua.match(/Windows\sPhone/i) != null) return true;
if (ua.match(/iPhone|iPod/i) != null) return true;
if (ua.match(/Android/i) != null) return true;
if (ua.match(/Edge\D?\d+/i) != null) return true;

var verTrident = ua.match(/Trident\D?\d+/i);
var verIE = ua.match(/MSIE\D?\d+/i);
var verOPR = ua.match(/OPR\D?\d+/i);
var verFF = ua.match(/Firefox\D?\d+/i);
var x64 = ua.match(/x64/i);
if ((verTrident == null) && (verIE == null) && (x64 !== null))
  return true;
else
if (verFF !== null) {
  verFF = verFF[0].match(/\d+/);
  if ((verFF[0] >= 41) || (x64 !== null)) return true;
} else
if (verOPR !== null) {
  verOPR = verOPR[0].match(/\d+/);
  if (verOPR[0] >= 32) return true;
} else
if ((verTrident == null) && (verIE == null)) {
  var verChrome = ua.match(/Chrome\D?\d+/i);
  if (verChrome !== null) {
    verChrome = verChrome[0].match(/\d+/);
    if (verChrome[0] >= 41) return true;
  };
};
return false;

} catch (err) {
return true;
};
};

//页面引用CLodop云打印必须的JS文件：
if (needCLodop()) {
var head = document.head || document.getElementsByTagName(“head”)[0] || document.documentElement;
var oscript = document.createElement(“script”);
oscript.src = “http://localhost:8000/CLodopfuncs.js?priority=1”;
head.insertBefore(oscript, head.firstChild);

//引用双端口(8000和18000）避免其中某个被占用：
oscript = document.createElement(“script”);
oscript.src = “http://localhost:18000/CLodopfuncs.js?priority=0”;
head.insertBefore(oscript, head.firstChild);
};
//获取LODOP对象的主过程：
export function getLodop(oOBJECT, oEMBED) {
var strHtmInstall = “
打印控件未安装!点击这里[执行安装],安装后请刷新页面或重新进入。”;
var strHtmUpdate = “
打印控件需要升级!点击这里[执行升级],升级后请重新进入。”;
var strHtm64_Install = “
打印控件未安装!点击这里[执行安装],安装后请刷新页面或重新进入。”;
var strHtm64_Update = “
打印控件需要升级!点击这里[执行升级],升级后请重新进入。”;
var strHtmFireFox = “

（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）”;
var strHtmChrome = “

(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）”;
var strCLodopInstall = “
CLodop云打印服务未安装启动!点击这里[执行安装],安装后请刷新页面。”;
var strCLodopUpdate = “
CLodop云打印服务需升级!点击这里[执行升级],升级后请刷新页面。”;
var LODOP;
try {
var isIE = (navigator.userAgent.indexOf(‘MSIE’) >= 0) || (navigator.userAgent.indexOf(‘Trident’) >= 0);
if (needCLodop()) {
try {
LODOP = getCLodop();
} catch (err) {};
if (!LODOP && document.readyState !== “complete”) {
Message({
message: “C-Lodop正在启动中，请稍后再试！”,
type: ‘error’,
duration: 2 * 1000
})
return;
};
if (!LODOP) {
if (isIE)
MessageBox.alert(strCLodopInstall, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
else
MessageBox.alert(strCLodopInstall, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
return;
} else {
if (CLODOP.CVERSION < “3.0.2.9”) {
if (isIE)
MessageBox.alert(strCLodopUpdate, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
else
MessageBox.alert(strCLodopUpdate, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
};
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
};
} else {
var is64IE = isIE && (navigator.userAgent.indexOf(‘x64’) >= 0);
//=如果页面有Lodop就直接使用，没有则新建:======
if (oOBJECT != undefined || oEMBED != undefined) {
if (isIE) LODOP = oOBJECT;
else LODOP = oEMBED;
} else if (CreatedOKLodop7766 == null) {
LODOP = document.createElement(“object”);
LODOP.setAttribute(“width”, 0);
LODOP.setAttribute(“height”, 0);
LODOP.setAttribute(“style”, “position:absolute;left:0px;top:-100px;width:0px;height:0px;”);
if (isIE) LODOP.setAttribute(“classid”, “clsid:2105C259-1E0C-4534-8141-A753534CB4CA”);
else LODOP.setAttribute(“type”, “application/x-print-lodop”);
document.documentElement.appendChild(LODOP);
CreatedOKLodop7766 = LODOP;
} else LODOP = CreatedOKLodop7766;
//=Lodop插件未安装时提示下载地址:======
if ((LODOP == null) || (typeof (LODOP.VERSION) == “undefined”)) {
if (navigator.userAgent.indexOf(‘Chrome’) >= 0)
MessageBox.alert(strHtmChrome, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
//document.body.innerHTML=strHtmChrome+document.body.innerHTML;
if (navigator.userAgent.indexOf(‘Firefox’) >= 0)
//document.body.innerHTML=strHtmFireFox+document.body.innerHTML;
if (is64IE) $alert(strHtm64_Install, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
else
if (isIE) MessageBox.alert(strHtmInstall, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
else
MessageBox.alert(strHtmInstall, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
})
return LODOP;
};
};
if (LODOP.VERSION < “6.2.2.1”) {
if (!needCLodop()) {
if (is64IE) MessageBox.alert(strHtm64_Update, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
else
if (isIE) MessageBox.alert(strHtmUpdate, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
else
MessageBox.alert(strHtmUpdate, ‘提示’, {
dangerouslyUseHTMLString: true,
showConfirmButton: false,
showCancelButton: true
});
};
return LODOP;
};
//=如下空白位置适合调用统一功能(如注册语句、语言选择等):=
LODOP.SET_LICENSES(“”, “”, “”, “”);
//===========================================================

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

        showCancelButton: true
      });
  };
  return LODOP;
};
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
LODOP.SET_LICENSES("", "", "", "");
//===========================================================

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84437170

关注

19
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最全【vue】实现打印功能_vue 打印(1)，retrofit教程

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】 NB打印
复制链接

扫一扫