呼叫瀏覽器的列印預覽
最近改一個頁面,想要做一個列印功能,而且需要列印預覽,我還沒處理過這種需求,特此記錄一下。
要列印是比較簡單的,js中使用window.print()函式就可以列印,內容為body的內容,相容IE10以下的瀏覽時可以引入WebBrowser物件,然後呼叫WebBrowser.ExecWB(7,1)進行列印預覽,呼叫WebBrowser.ExecWB(6,1)進行列印。
主要的問題是何時呼叫,因為是區域性列印,所以如果在原頁列印的話,有兩種方法:隱藏不需要列印的內容或者提取出想列印的內容替換進body中,兩種方法都涉及比較多的DOM操作,而且原有的樣式會對列印造成影響。所以我打算新開頁面,把需要的內容填進去,另外建立一個列印專用的css檔案引入,再呼叫列印,得到了比較好的展示效果。
有個注意的點是,注入css檔案之後,頁面需要一點時間進行渲染,下面這個情況會在未渲染完成的時候進行列印:
var newWin=window.open('');//新開頁面 var print=document.getElementById("print");//提取要列印的內容 newWin.document.write(print.outerHTML);//輸入要列印的內容 var link=newWin.document.createElement("link");//插入新樣式檔案 link.href="style/print.css"; link.type="text/css"; link.rel="stylesheet"; newWin.document.head.appendChild(link); newWin.print();
如何解決呢?辦法是使用setTimenOut()函式,把延遲時間設定為0,再在裡面呼叫print()就能實現一個延遲的效果,讓頁面先渲染再打印出正確的樣式。這裡涉及到瀏覽器解釋js的原理,在瀏覽器有一個Task Queue,執行setTimenOut(fun,0)的時候會把fun推到Task Queue中去,等待瀏覽器的執行棧空了之後(代入上面的例子就是樣式載入之後),Task Queue中的內容才會被推入執行棧中執行,從而達到一種延時效果。
另外,需要列印的頁面往往會有比較多的表格和表單,需要針對性地改寫樣式,例如清除表單元件的預設樣式。textarea會隨著內容的增加而產生滾動條,在列印之前需要先把textarea改為p標籤(或者別的),這也是不選擇在原頁上面呼叫print()的原因。
(另外吐槽一下CSDN的編輯器,自動換行真是太非人類了)
相關推薦
呼叫瀏覽器的列印預覽
最近改一個頁面,想要做一個列印功能,而且需要列印預覽,我還沒處理過這種需求,特此記錄一下。 要列印是比較簡單的,js中使用window.print()函式就可以列印,內容為body的內容,相容IE10以下的瀏覽時可以引入WebBrowser物件,然後呼叫WebBrowser
IE瀏覽器實現列印預覽
最近遇到這麼一個需求,需要在IE瀏覽器上列印的時候,不直接呼叫印表機,而是先開啟列印預覽頁面,再進行列印操作。 這樣,就需要對原本的列印方法進行改寫了。具體實現如下: 在jsp頁面進行以下操作。
WEB頁面列印預覽、列印 相容所有瀏覽器
因專案裡要做頁面列印預覽以及列印功能,還要求相容大部分主流瀏覽器 實現方式有很多最後決定用window.print();大部分瀏覽器都適用, window.print()方式ie瀏覽器不支援列印預覽,針對ie瀏覽器的預覽用ie自有列印元件 WebBrowser.ExecWB實現 ie瀏覽器預覽時要把不需要預
JS 實現瀏覽器列印、列印預覽
目前正在做瀏覽器端採用JS方式實現列印這麼一個功能,JS列印實現的方法很多,但是相容各個瀏覽器實現列印預覽的功能有些棘手,現將實現的內容及遇到的問題記錄下來,希望有大牛看到所提的問題後可以給予解答,在此感謝啦。 1.JS實現列印的方式 方式一:window.print()
谷歌瀏覽器中全屏及跳過頁面列印預覽的設定
1.首先在桌面建立一個谷歌瀏覽器的快捷方式; 2.開啟瀏覽器>>然後開啟“設定”選單>>在“啟動時”一項中選擇“開啟特定網頁或一組網頁”>>點選“新增新網頁”,輸入專案或網站地址>>儲存; 3.滑鼠右鍵點選快捷方式>
用WPF實現列印及列印預覽
原文: 用WPF實現列印及列印預覽 應該說,WPF極大地簡化了我們的列印輸出工作,想過去使用VC++做開發的時候,列印及預覽可是一件極麻煩的事情,而現在我不會再使用C++來做Windows的桌面應用了——價效比實在太低。 WPF的列印功能是很強大而簡便的,它甚至能夠直接列印介面上的內容,
怎麼使用CAD編輯器列印預覽CAD圖紙?
怎麼使用CAD編輯器列印預覽CAD圖紙?在日常的工作中,建築設計師們編輯完圖紙後,不僅僅需要對CAD圖紙進行檢視,有的時候如果要去建築施工地去檢視的話,不可能把電腦一起帶到施工現場吧,那就需要變編輯好的CAD圖紙打印出來,那怎麼使用CAD編輯器列印預覽CAD圖紙?具體要怎麼來進行操作了,下面就來教教大傢俱體操
列印預覽:print
一、函式 function printed(){ $.ajaxPrint({ url: '<g:createLink controller="oneLevel" action="print"/>', title: '
java+js將資料列印預覽PDF
1、pdfjs包的位置 2.後臺java @RequestMapping(params = "goViewPDF") public ModelAndView goViewPDF(HttpServletRequest request,HttpServletRespon
列印預覽功能
發票列印 @RequestMapping(value = “getXps1”) public void xpsGet1(HttpServletResponse response){ File file = new File(“C:/Users/Administr
VC++對話方塊程式列印及列印預覽的實現(三)
本文首先介紹了利用MFC提供的文件檢視框架來實現一個列印程式,實現列印預覽,在此基礎上,同時通過對MFC原始碼的深入探討,提出了利用該方法在對話方塊上用MFC實現列印功能,結果表明,利用MFC實現列印不僅方便,而且功能很強大,能夠根據不同的需求很方便的打印出所需要的格式。本文還實現了一個在對話方塊中
VC++對話方塊程式列印及列印預覽的實現(二)
這是接上面的具體實現能夠成功的打印出資料 CPrintView.h的詳細程式碼 pragma once #include "StatisticsCoverDlg.h" // CPrintView 檢視 #define PRINTMARGIN 2 BOOL CALLBACK _AfxMyPr
VC++對話方塊程式列印及列印預覽的實現(一)
張明奇(卡哥)註釋:成功版本 MFC文件/檢視的應用程式,嚮導給了列印及列印預覽的標準支援。使這類應用程式列印及列印預覽工作得以簡化。另一類對話方塊程式卻沒有相應支援,從MFC列印及列印預覽的標準支援
C#列印預覽時更改預設邊距,並設定預設的寬高
new PrinterMargins(20,20,20,20,787,1129) //此步最好在初始化,document 的時候就設定好邊距,否則後面邊距設定後,還有一些預設的X1,Y1非設定的值不會變化,會是預設的100,影響了列印時整個座標的結果。
c# 頁面列印預覽 並儲存為PDF
這次列印的方法主要是獲取頁面的html檔案 進行整理 並生成列印預覽 1.C# 的.aspx 頁面 需要設定 <!--startprint--> 和 <!--endprint--> 用於設定列印內容 2.列印按鈕設定onclick="previe
如何呼叫瀏覽器列印功能來列印頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="print.aspx.cs" Inherits="_print" %> <!DOCTYPE html PUBLIC "-//W3C//DTD
讓Sublime Text2支援瀏覽器中預覽
提醒:本文最後更新於 2517 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 從Editplus轉到Sublime Text2的同學,不知道有沒覺得它少了個很有用的功能:view in browser(ctrl+b)。平時寫點小demo時,那種一秒鐘切瀏覽器看下效果,一秒後再切回來改下程式碼的
基於Metronic的Bootstrap開發框架經驗總結(9)--實現Web頁面內容的列印預覽和儲存操作
在前面介紹了很多篇相關的《Bootstrap開發框架》的系列文章,這些內容基本上覆蓋到了我這個Bootstrap框架的各個主要方面的內容,總體來說基本達到了一個穩定的狀態,隨著時間的推移可以會引入一些更好更新的內容進行完善,本篇繼續這個系列,主要介紹如何實現Web頁面內容的列印預覽和儲存操作。 1、Web頁
js呼叫瀏覽器列印
function btnPrintClick(){ bdhtml=window.document.body.innerHTML; //先儲存當前頁面document.body.innerHTML=doc
Web下實現列印、列印預覽、列印設定、匯出到Excel
常用JS列印: var printContent = $("printtable").innerHTML; var bodyContent = document.body.innerHTML; document.body.innerHTML = printCont