1. 程式人生 > >jQuery-jqprint實現列印功能

jQuery-jqprint實現列印功能

       現今網站的開發越來越多的使用到列印的功能,剛好最近有用到一款超輕量的外掛,使用起來及其方便,現共享出來大家一起學習學習,使用方法如下:

1、首先需要引入必須的js檔案

<script language="javascript" src="jquery-1.3.X.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>

2、編寫列印區域

<div id="print"> <table> <
tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table> </div>

3、引用列印功能

<script language="javascript"> $("#print").jqprint({
          debug: false, //如果是true則可以顯示iframe檢視效果(iframe預設高和寬都很小,可以再原始碼中調大),預設是false
importCSS: true, //true表示引進原來的頁面的css,預設是true。(如果是true,先會找$("link[media=print]"),若沒有會去找$("link")中的css檔案)
printContainer: true, //表示如果原來選擇的物件必須被納入列印(注意:設定為false可能會打破你的CSS規則)。
operaSupport: false //表示如果外掛也必須支援歌opera瀏覽器,在這種情況下,它提供了建立一個臨時的列印選項卡。預設是true
       });
</script> 4、如需自配樣式

<link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>
來引用外部css檔案中的樣式。這樣的好處是該樣式只會在列印時才應用,這樣在打印表格時就可以防止表格變形啦,如果你要列印的頁面本來就是個iframe,此時寫了media屬性的link樣式也不會運用到列印預覽中,解決辦法:直接給列印區域元素寫行內樣式。

相關推薦

利用JQuery jqprint實現列印功能

1,要先引入jquery.js 和 jquery.jqprint.js 2個js檔案 下載連結:jquery.jqprint.js 2,例項程式碼如下 <html> <head> <script type="text/javascript

jQuery-jqprint實現列印功能

       現今網站的開發越來越多的使用到列印的功能,剛好最近有用到一款超輕量的外掛,使用起來及其方便,現共享出來大家一起學習學習,使用方法如下: 1、首先需要引入必須的js檔案 <scrip

jquery.jqprint 實現列印

<!doctype html> <html>  <head>   <title>列印</title>  </head>  <body>    <div id="print">  

jQuery外掛實現列印功能

寫一下jQuery列印外掛用法吧,最近在做一個列印訂單的功能,研究了半天什麼匯出excel,畫X,Y軸之類的,最後發現jQuery一個外掛就能實現生成pdf列印。 首先需要下載兩個外掛: <!-- jQuery --> <script src="js/j

Jquery Jqprint—藉助Jquery Jqprint實現網頁列印功能

        今天利用閒餘時間研究了一下Jquery Jqprint外掛,使用該Jquery指令碼可以輕而易舉的實現列印網頁指定區域內容的功能:        例子一:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

VUE實現列印功能的兩種方法

第一種方法:通過npm 安裝外掛   1,安裝  npm install vue-print-nb --save 2,引入  安裝好以後在main.js檔案中引入       &n

jquery的printArea列印功能

(function($) { $.fn.printArea = function() { var ele = $(this); var printCss = ''; $(document).find("link").filter(function() { return $(this).attr("rel").

react + antd 實現列印功能(踩了不少坑)

最近在有網頁列印需求,嘗試了一下react的列印功能,遇到了不少的坑: 1.react本身有一些列印的元件,但都不好用,都是基於window.print(),但是window.print()如果直接列印的話,沒有樣式。處理直接當前網頁的body設定為你要列印的區域,但是當你取消列印的時候你會發現整個網頁都被

vc 實現列印功能

Visual C++6.0是開發Windows應用程式的強大工具,但是要通過它實現程式的列印功能,一直是初學者的一個難點,經常有朋友詢問如何在VC中實現列印功能,他們往往感到在MFC提供的框架內實現這個問題很複雜,不知道如何下手。本例針對這個問題,介紹一種簡單的方法實

extjs利用第三方列印外掛實現列印功能

extjs由於是基於JS語言,其列印是可以按照一般的WEB列印方式來進行。筆者在網路上發現第三方列印外掛Lodop(詳見地址:http://mtsoftware.v053.gokao.net/index.html),因為這個外掛可以實現多種瀏覽器(如:IE FF 谷

app專案實現列印功能

1.實現列印圖片的簡單程式碼:    UIPrintInteractionController *printC = [UIPrintInteractionControllersharedPrintController];     UIPrintInfo *printInf

jsp頁面中實現列印功能

<boby><!--startprint--><div>要列印的內容</div><!--endprint--></boby><script>window.onload=function(){v

java實現列印功能並控制列印方向

AttributeSet方法,其實就是列印屬性的設定,其實在一個列印過程中子介面有四個,其對應的實現類也有四個(貌似有5個,一個是總類)。詳細見連線。這裡需要提一下需要這麼多列印屬性設定介面的原因: a. 包含 DocAttribute 的 DocAttributeSet 指定單個文件的特徵和應用到單個文件

ASP.NET水晶報表實現列印功能

ASP.NET下的水晶報表列印,據我所知有以下幾種辦法可以列印:        1.用IE的列印.呼叫window.print(),但這種辦法對於頁面上即有報表,又有其它控制元件情況就無法區分,不能達到只打印報表內容的目的;       2.自已寫列印程式碼. 程式碼如

使用jqprint()實現列印,封裝window.print()

可以輕鬆實現列印網頁上的某個區域請注意!很多朋友遇到 Cannot read property 'opera' of undefined 錯誤問題是juqery版本相容問題解決方法:加入遷移輔助外掛 jquery-migrate-1.0.0.js可解決版本問題引入<sc

在Web中如何運用JavaScript實現列印功能

概述:在Web中想用JavaScript實現列印功能,需要一個瀏覽器控制元件WebBrowser。WebBrowser是IE內建的瀏覽器控制元件,無需使用者下載,只需要在頁面簡單的設定,就可以Dom方法獲取到該物件. 本文將詳細介紹如何運用WebBrowser實現列印功能

在html頁面實現列印功能

首先在head裡面加入下面一段js程式碼: <script language="javascript"> function preview(oper){ if (oper < 10){ bdhtml=window.docu

web呼叫本地方法,並實現列印功能(螢幕解析度導致列印斷斷續續不清晰)

問題:java web開發進銷存系統,使用者需求打印出貨單,一開始採取js的window.print方法,測試環境效果不錯,挪移到使用者那裡時列印結果出現字型斷斷續續不清晰的情況,然而用我的電腦列印時卻不會出現如此狀況,進而懷疑是使用者的機器問題,多方查證是因為使用者電腦的

DevExpress-winform實現列印功能

建立Windows窗體,拖入richEdtControl(或者GridControl)+列印按鈕(button) 雙擊列印,

利用jQuery.print.js實現canvas的列印功能

需求 把在瀏覽器中的利用canvas做的圖實現列印功能 思路 先把canvas轉換成img 把生成的img利用jQuery外掛jquery.print.js實現圖片列印功能 資料連