前端打印功能

方法一：
html代码：
在这里插入图片描述
在要打印的内容上加入：<!--startprint-->和<!--endprint-->

js代码：

$('.printData').click(function(){bdhtml=window.document.body.innerHTML;   sprnstr="<!--startprint-->";   eprnstr="<!--endprint-->";   prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   window.document.body.innerHTML=prnhtml;  window.print();})

去除打印按钮，在css中加入：

@media print {.noprint{display: none;}}

方法二：

<buttonn>打印</buttton><div id="print">
<!-- 要打印的内容 -->
<div>

 $('.printData').click(function(){
// document.getElementById('print')获取需要打印区域的id名// innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。let newstr = document.getElementById('print').innerHTML;console.log(newstr)window.document.body.innerHTML = newstr;let oldstr = window.document.body.innerHTML;// 实现打印功能window.print();window.location.reload();   //解决打印之后按钮失效的问题window.document.body.innerHTML = oldstr;return false;
})

方法三：lodop 官网：http://www.lodop.net/index.html
在这里插入图片描述

  1. 语法：更详细的可以戳 “这里”
    （1） PRINT_INIT(strPrintTaskName)打印初始化
    （2）SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
    （3）ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
    （4） ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
    （5） ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
    （6） ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
    （7）SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
    （8）PREVIEW打印预览
    （9）PRINT直接打印
    （10）PRINT_SETUP打印维护
    （11）PRINT_DESIGN打印设计
  2. 去下载中心下载案例，保留 js 文件。
    在这里插入图片描述
  3. 我这里用在 vue 项目中，所以要对 js 进行改造。感谢一下https://www.jianshu.com/p/d288963c1a80提供的代码
var CreatedOKLodop7766 = nullexport function needCLodop() {try {var ua = navigator.userAgentif (ua.match(/Windows\sPhone/i) != null) return trueif (ua.match(/iPhone|iPod/i) != null) return trueif (ua.match(/Android/i) != null) return trueif (ua.match(/Edge\D?\d+/i) != null) return truevar 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 trueelse 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.documentElementvar 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 ="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后建议重新打开浏览器刷新页面或重新打开浏览器。</font>"var strHtmUpdate ="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新打开浏览器。</font>"var strHtm64_Install ="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新打开浏览器。</font>"var strHtm64_Update ="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新打开浏览器。</font>"var strHtmFireFox ="<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>"var strHtmChrome ="<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>"var strCLodopInstall ="<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行安装</a>,安装后请刷新页面。</font>"var strCLodopUpdate ="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行升级</a>,升级后请刷新页面。</font>"var LODOPtry {var isIE =navigator.userAgent.indexOf('MSIE') >= 0 ||navigator.userAgent.indexOf('Trident') >= 0if (needCLodop()) {try {LODOP = getCLodop()} catch (err) {}if (!LODOP && document.readyState !== 'complete') {alert('C-Lodop没准备好，请稍后再试！')return}if (!LODOP) {if (isIE) document.write(strCLodopInstall)elsedocument.body.innerHTML =strCLodopInstall + document.body.innerHTMLreturn} else {if (CLODOP.CVERSION < '3.0.4.3') {if (isIE) document.write(strCLodopUpdate)elsedocument.body.innerHTML =strCLodopUpdate + document.body.innerHTML}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 = oOBJECTelse 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)document.body.innerHTML =strHtmChrome + document.body.innerHTMLif (navigator.userAgent.indexOf('Firefox') >= 0)document.body.innerHTML =strHtmFireFox + document.body.innerHTMLif (is64IE) document.write(strHtm64_Install)else if (isIE) document.write(strHtmInstall)elsedocument.body.innerHTML =strHtmInstall + document.body.innerHTMLreturn LODOP}}if (LODOP.VERSION < '6.2.2.3') {if (!needCLodop()) {if (is64IE) document.write(strHtm64_Update)else if (isIE) document.write(strHtmUpdate)elsedocument.body.innerHTML =strHtmUpdate + document.body.innerHTML}return LODOP}//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===//===========================================================return LODOP} catch (err) {alert('getLodop出错:' + err)}
}
  1. 把它放到 src 下的 plugs 文件夹中，在需要用的页面中引入
import {getLodop} from '@/plugs/vuePrint/LodopFuncs.js'

5.要注意的是，lodop 不能读取外部样式
在这里插入图片描述
复制demo中的 js 部分到 methods

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362735.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vlc支持IE 360 低版本的Google浏览器

Vlc支持IE 360 低版本的Google浏览器

VLC 插件代码&#xff1a; <object typeapplication/x-vlc-plugin pluginspage"http://www.videolan.org/" idvlc eventsfalse width"720" height"410"><param namemrl valuertsp://admin:123456******:554/h264/ch1/main/av_stream /&…
阅读更多...
同步多线程

同步多线程

同步多线程&#xff08;SMT&#xff09;是一种在一个CPU 的时钟周期内能够执行来自多个线程的指令的硬件多线程技术。本质上&#xff0c;同步多线程是一种将线程级并行处理&#xff08;多CPU&#xff09;转化为指令级并行处理&#xff08;同一CPU&#xff09;的方法。 同步多线…
阅读更多...
如何使用布隆过滤器在Java中建立大容量的内存缓存

如何使用布隆过滤器在Java中建立大容量的内存缓存

背景 缓存是解决日常软件问题的重要概念。 您的应用程序可能会执行CPU密集型操作&#xff0c;而您又不想一次又一次地执行这些操作&#xff0c;而是只导出一次结果并将其缓存在内存中。 有时瓶颈是IO&#xff0c;例如您不想重复访问数据库&#xff0c;并且想缓存结果并仅在基础…
阅读更多...
Centos7安装Python3的方法

Centos7安装Python3的方法

由于centos7原本就安装了Python2&#xff0c;而且这个Python2不能被删除&#xff0c;因为有很多系统命令&#xff0c;比如yum都要用到。 [rootVM_105_217_centos Python-3.6.2]# python Python 2.7.5 (default, Aug 4 2017, 00:39:18) [GCC 4.8.5 20150623 (Red Hat 4.8.5-16)…
阅读更多...
ajax请求导致status为canceled的原因

ajax请求导致status为canceled的原因

在使用layui的form表单提交以后&#xff0c;请求状态总是canceled。后来在form表单的后面添加了一行代码&#xff1a; return false; 就可以了。 文档&#xff1a;https://www.layui.com/doc/modules/form.html#onsubmit 错误&#xff1a; 解决方法&#xff1a; 总结一下&…
阅读更多...
CSS图片水平垂直居中

CSS图片水平垂直居中

Html: <div id"MainContent"><img src"QQ截图20150515140512.png" width"247" height"192"></img></div></div> CSS: #MainContent {display:table-cell;width: 700px;height: 800px;background: #0C78…
阅读更多...
如何开启OpenSSL和mcrypt

如何开启OpenSSL和mcrypt

1&#xff0c;要想开启mcrypt支持&#xff0c;系统需要安装了libmcrypt.dll库。这个一般用户是没有安装过的&#xff0c;但不用担心&#xff0c;PHP的windows发行包里已经给我们附带了此文件&#xff0c;在PHP压缩包的根目录下即可找到&#xff0c;然后将其复制到%system%/syst…
阅读更多...
如果BigDecimal是答案，那肯定是一个奇怪的问题

如果BigDecimal是答案，那肯定是一个奇怪的问题

总览 许多开发人员已确定BigDecimal是处理金钱的唯一方法。 通常&#xff0c;他们通过用BigDecimal替换double来确定错误或十个错误。 我对此没有说服力的是&#xff0c;也许他们可以解决double处理中的错误以及使用BigDecimal的额外开销。 根据我的比较&#xff0c;当被问到改…
阅读更多...
算法思想_常见四种

算法思想_常见四种

文章目录常用算法思想描述穷举算法思想1. 基本思想2. 步骤3.实例递推算法1. 基本思想2. 步骤3. 实例递归算法1. 基本思想2. 步骤3. 实例1. 分治算法1. 基本思想2. 步骤3. 实例概率算法1. 基本思想2. 步骤3. 实例如果还有时间&#xff0c;将继续更新常用算法思想描述 穷举算法思…
阅读更多...
[转] 做个自强不息的青年

[转] 做个自强不息的青年

人的出生和际遇本身造就了每个人的道路都不同&#xff0c;对于青年人来说&#xff0c;如何能够面对逆顺&#xff0c;如何面对起伏&#xff0c;如何能够正确设定理想并为之激发生命的火焰&#xff0c;在持续的奋斗中不断提升自我&#xff0c;自强不息而自立利他&#xff1f;在与…
阅读更多...
commonJS — 全局操作（for Window）

commonJS — 全局操作（for Window）

for Window github: https://github.com/laixiangran/commonJS/blob/master/src/forWindow.js 代码 /*** Created by laixiangran on 2016/1/24* homepage&#xff1a;http://www.cnblogs.com/laixiangran/* for Window*/ (function() {var com window.COM window.COM || {}…
阅读更多...
点击返回上一页失效

点击返回上一页失效

点击取消的时候&#xff0c;返回上一页&#xff0c;没有效果&#xff0c;仍然停留在当前页&#xff0c;还报500&#xff1b;改成window.history.go(-1)也不生效 代码&#xff1a; <button class"st-btn-normal st-btn-cancel cancle" onclick"javascript:wi…
阅读更多...
如何通过7个Logback调整立即改善Java日志记录

如何通过7个Logback调整立即改善Java日志记录

基准测试可帮助您发现Logback在压力下的性能 日志记录对于服务器端应用程序是必不可少的&#xff0c;但这是有代价的。 令人惊讶的是&#xff0c;微小的更改和配置调整对应用程序的日志记录吞吐量有多大影响。 在这篇文章中&#xff0c;我们将根据每分钟的日志条目对Logback的性…
阅读更多...
JS中的编码

JS中的编码

今天发现我输入的中文变成了另外一种格式&#xff0c;查了一下&#xff0c;原来是转换成了数字编码。在这里介绍一下数字编码和base64&#xff0c;做个记录 1.出现原因&#xff1a;在开发中经常需要对用户输入的数据进行编码然后才能通过HTTP请求发送给后台&#xff0c;或者对…
阅读更多...
commonJS — DOM操作（for DOM）

commonJS — DOM操作（for DOM）

for DOM github: https://github.com/laixiangran/commonJS/blob/master/src/forDOM.js 代码 /*** Created by laixiangran on 2016/1/24* homepage&#xff1a;http://www.cnblogs.com/laixiangran/* for DOM*/(function(undefined) {var com window.COM window.COM || {};…
阅读更多...
deMeer5_Attacker

deMeer5_Attacker

SoccerCommand Player::deMeer5_Attacker(){SoccerCommand soc(CMD_ILLEGAL);if (WM->isBeforeKickOff()){if (formations->getFormation() ! FT_INITIAL || //不在开球的阵型 WM->getAgentGlobalPosition().getDistanceTo(WM->getStrategicPosition()) > 2.…
阅读更多...
【Flutter】解决依赖版本冲突

【Flutter】解决依赖版本冲突

为什么会存在版本依赖问题 我们在开发flutter项目中&#xff0c;常常会依赖第三方库。flutter依赖项越多&#xff0c;就越有可能出现依赖版本冲突。 Because new_trend depends on build_runner >0.9.0 which requires SDK version >2.0.0-dev.61 <3.0.0, version sol…
阅读更多...
安装vue-cli时报错

安装vue-cli时报错

今天用npm安装vue-cli时一直报错&#xff0c;后面百度说用cnpm重装&#xff0c;结果还是报错&#xff0c;后面找到一个博主的&#xff0c;说是vue升级的原因&#xff0c;vue init webpack hello-world 已经替换为 vue create hello-world npm install -g vue/cli-init # vue…
阅读更多...
从JPA到Hibernate的旧版和增强型标识符生成器

从JPA到Hibernate的旧版和增强型标识符生成器

JPA标识符生成器 JPA定义了以下标识符策略&#xff1a; 战略 描述 汽车 持久性提供程序选择基础数据库支持的最合适的标识符策略 身份 标识符由数据库IDENTITY列分配 序列 持久性提供程序使用数据库序列来生成标识符 表 持久性提供程序使用单独的数据库表来模拟序列对…
阅读更多...
快速了解AngularJs HTTP响应拦截器

快速了解AngularJs HTTP响应拦截器

任何时候&#xff0c;如果我们想要为请求添加全局功能&#xff0c;例如身份认证、错误处理等&#xff0c;在请求发送给服务器之前或服务器返回时对其进行拦截&#xff0c;是比较好的实现手段。 angularJs通过拦截器提供了一个从全局层面进行处理的途径。 四种拦截器 实现 req…
阅读更多...
最新文章

Copyright @ 2022~2023