bootstrap PrintThis打印插件使用详解

2024-12-18 05:00:56

bootstrap PrintThis打印效果图：

如图，这个是调用了谷歌的打印，使用很方便，可以自己調样式，需要的可以研究一下，这边贴出使用方法。

附上GitHub：https://github.com/jasonday/printThis
jsp：

<script src="<%=basePath %>bootstrap/js/printThis.js"></script>

<!-- 二维码弹出框 -->
<div class="modal fade" id="myModal_qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">二维码</h4>
   </div>
   <div class="modal-body">
    <center>
     <div id="qrcode"></div>
     <table>
      <tbody>
       <tr>
        <td>
         <label class="col-sm-4 control-label" for="equ_name_qrcode"><h7>设备名称:</h7></label>
         <div class="col-sm-8">
          <input class="form-control" id="equ_name_qrcode" type="text"/>
         </div>
        </td>
        <td>
         <label class="col-sm-4 control-label" for="equ_ip_qrcode"><h7>设备IP:</h7></label>
         <div class="col-sm-8">
         <input class="form-control" id="equ_ip_qrcode" type="text"/>
         </div>
        </td>
       </tr>
      </tbody>
     </table>
    </center>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
    </button>
    <button type="button" id="btn_print" class="btn btn-primary" data-dismiss="modal">
     <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>打印
    </button>
   </div>
  </div>
 </div>
</div>

js：

 $("#btn_print").click(function(event) {
  /* Act on the event */
   $("#qrcode").printThis({
    debug: false,
    importCSS: false,
    importStyle: false,
    printContainer: true,
//    loadCSS: "/Content/Themes/Default/style.css",
    pageTitle: "二维码",
    removeInline: false,
    printDelay: 333,
    header: null,
    formValues: false
   });
//  alert("等待打印");
 });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码这里条形码生成使用了JsBarcode组件进行处理,它支持很多
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我
Bootstrap 3.x打印预览背景色与文字显示异常的解决

我首先测试了一段如下的代码,发现打印预览时的确无法显示背景色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Regonline</title> <link href="css/bootstrap.css" rel="stylesheet" /> &l
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

关于Lodop打印是个很牛逼的打印插件,但是打印Bootstrap的样式的时候很恶心比如:页面是这样打印之后的效果恶心的不要不要的单独修改后的样式出现这样的问题就是可能是bs把这个插件当做手机显示了,也可能是这样插件对bs集成不行 lodop对常规html+css还是不错的,下面丢上bs版的代码控件对应html+js使用代码 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind=&qu
bootstrap PrintThis打印插件使用详解

bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法. 附上GitHub:https://github.com/jasonday/printThis jsp: <script src="<%=basePath %>bootstrap/js/printThis.js"></script>  <div class=
第十篇BootStrap轮播插件使用详解

Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果图如下所示: 关键代码如下: <div id="carousel-example-generic" c
Bootstrap模态框插件使用详解

本文主要学习Bootstrap 中的模态框插件,这是一款交互式网站非常常见的弹窗功能插件. 1．基本使用使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层).dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). 结合具体演示来理解如下内容:  <
bootstrap table表格插件使用详解

bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl
BootStrap中Table分页插件使用详解

分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式引入css和js  <link href=&qu
Bootstrap 附加导航（Affix）插件实例详解

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 用法您可以通过 data 属
基于Bootstrap3表格插件和分页插件实例详解

首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据下面分页使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
jQuery实现区域打印功能代码详解

使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu
Bootstrap框架的学习教程详解(二)

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.bootcss.com/getting-started/#download PS:其实我们不用下载bootstrap也可以使用
vue前端实现打印下载示例详解

目录 html2canvas介绍 jspdf介绍 printjs介绍 html2canvas介绍分享一下几个后台管理系统比较常用的插件:下载.打印 html2canvas是在浏览器上对网页进行截图操作,实际上是操作DOM,这个插件也有好长时间了,比较稳定,目前使用还没有遇到什么bug jspdf介绍如果下载出来是pdf文件,可以加上jspdf插件,会先通过html2canvas把页面转化成base64图片,再通过jspdf导出安装 npm i html2canvas jspdf 或 yar

bootstrap PrintThis打印插件使用详解

相关推荐

随机推荐