前端打印功能

方法一：
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，一经查实，立即删除！

相关文章

同步多线程

同步多线程

同步多线程&#xff08;SMT&#xff09;是一种在一个CPU 的时钟周期内能够执行来自多个线程的指令的硬件多线程技术。本质上&#xff0c;同步多线程是一种将线程级并行处理&#xff08;多CPU&#xff09;转化为指令级并行处理&#xff08;同一CPU&#xff09;的方法。 同步多线…
阅读更多...
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; 总结一下&…
阅读更多...
点击返回上一页失效

点击返回上一页失效

点击取消的时候&#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;或者对…
阅读更多...
【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…
阅读更多...
CenterNet算法笔记（目标检测论文）

CenterNet算法笔记（目标检测论文）

论文名称&#xff1a;CenterNet: Keypoint Triplets for Object Detectiontection 论文链接&#xff1a;https://arxiv.org/abs/1904.08189 代码链接&#xff1a;https://github.com/Duankaiwen/CenterNet 简介 该论文是由中科院&#xff0c;牛津大学以及华为诺亚方舟实验室联合…
阅读更多...
elementUI的container布局设置全屏宽度

elementUI的container布局设置全屏宽度

进用element UI的 container 布局&#xff0c;发现不能全屏铺满 添加了一行代码&#xff1a; .el-container{height:100%;padding:0;margin:0;width:100%;}发现高度占满全屏&#xff0c;但是宽度还没有 继续给 html,body加了 width&#xff1a;100%&#xff1b;还是没有任何…
阅读更多...
CSS border-radius边框圆角

CSS border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持&#xff0c;可对边框1~4个角进行圆角样式设置。 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性 border-radius &#xff1a;同时设置4个边框的…
阅读更多...
element实现动态路由+面包屑

element实现动态路由+面包屑

要掌握&#xff1a;localStorage&#xff0c;组件封装 ​​​​ emm&#xff0c;第一次上传视频转gif的图片&#xff0c;效果不咋好。。。 视频转gif 的软件连接 http://www.zxt2007.com/downloads.html 找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif…
阅读更多...
Oracle最新的Java 8更新破坏了您的工具-它是如何发生的？

Oracle最新的Java 8更新破坏了您的工具-它是如何发生的？

如果您最近一直在关注Java世界的消息&#xff0c;那么您可能听说过Oracle发布的最新Java 8构建&#xff0c;Java 8u11&#xff08;和Java 7u65&#xff09;引入了错误并破坏了一些流行的第三方工具&#xff0c;例如ZeroTurnaround的JRebel&#xff0c;Javassist&#xff0c;Goo…
阅读更多...
为什么选择Dojo - 记Dojo中文博客正式开张

为什么选择Dojo - 记Dojo中文博客正式开张

公告栏里写到&#xff1a;Dojo的高门槛一旦跨过&#xff0c;必将别无所求。含义有二&#xff1a;第一&#xff0c;Dojo难学&#xff1b;第二&#xff0c;Dojo很强大。 这也揭示了本博客的目标&#xff1a;帮助大家用好Dojo这个优秀的Ajax框架。 在回答为什么选择Dojo之前&#…
阅读更多...
ExtJS 4.2 第一个程序

ExtJS 4.2 第一个程序

本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图 2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序 1.1 创建目录…
阅读更多...
ZooKeeper，策展人以及微服务负载平衡的工作方式

ZooKeeper，策展人以及微服务负载平衡的工作方式

Zookeeper如何确保每位工人都能愉快地从工作委托经理那里得到一些工作。 Apache ZooKeeper是注册&#xff0c;管理和发现在不同计算机上运行的服务的工具。 当我们必须处理具有许多节点的分布式系统时&#xff0c;它是技术堆栈中必不可少的成员&#xff0c;这些节点需要知道其…
阅读更多...
elementUI清空弹框中的表单数据

elementUI清空弹框中的表单数据

点击此处直达应用场景示例 官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/form 补充&#xff1a;改变表头颜色&#xff1a; <el-table :data"tableData" border style"width: 100%" :header-cell-style"{background:#d3dce6,col…
阅读更多...
.Net4.0 Parallel编程（三）Data Parallelism下

.Net4.0 Parallel编程（三）Data Parallelism下

在上篇文章中介绍了如何Break、Stop循环&#xff0c;以及如何定义线程局部变量。在本文中介绍如何在外部去取消循环、以及异常的处理。 Cancel 在并行的循环中支持通过传递ParallelOptions参数中的CancellationToken进行取消循环的控制&#xff0c;我们可以CancellationTokenSo…
阅读更多...
git仓库创建后，由主支变成开发分支

git仓库创建后，由主支变成开发分支

阅读更多...
根据可视窗口判断面板向上还是向下展开

根据可视窗口判断面板向上还是向下展开

本demo以element-ui框架为视图模板~ HTML代码 JS代码 CSS代码 转载于:https://www.cnblogs.com/dreamsqin/p/10885502.html
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023