js打印

原文地址：https://www.cnblogs.com/potatog/p/7412905.html

一.打印當前頁面指定元素中的內容

方式一：直接使用window.print();

（1）首先得到元素的html內容（這裏建議若是有樣式最好是用內聯樣式的方式）

  var newstr = document.getElementById(myDiv).innerHTML;//獲得須要打印的元素HTML

（2）保存當前頁面的整個html，由於window.print()打印操做是打印當前頁的全部內容，因此先將當前頁面保存起來，以後便於恢復。

var oldstr = document.body.innerHTML;//保存當前頁面的HTML

（3）把當前頁面替換爲打印內容HTML

document.body.innerHTML = newstr;

（4）執行打印操做

window.print();

（5）還原當前頁面

document.body.innerHTML = oldstr;

方法例：

//myDiv爲須要打印的元素ID

function printpage(myDiv){   
var newstr = document.getElementById(myDiv).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}

方式二：window.open("",..)新開瀏覽器對話框打印。

（1）得到須要打印的元素HTML

var printHtml = document.getElementById("myDiv").innerHTML;//這個元素的樣式須要用內聯方式，否則在新開打印對話框中沒有樣式

（2）打開一個窗口，且內容設置爲空。

var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');

（3）將新窗口內容填充爲須要打印的HTML內容

wind.document.body.innerHTML = printHtml;

（4）打印

wind.print();

方法例：

//myDiv爲須要打印的元素ID

function printpage(myDiv){   
var printHtml = document.getElementById(myDiv).innerHTML;

var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');

wind.document.body.innerHTML = printHtml;

wind.print();
return false;
}

2、打印經過url獲取的內容

直接使用

var wind = window.open(url,'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');

wind.print();

對方url返回的全部內容都會被打印，，，若是知道須要打印指定內容的ID，能夠先將頁面獲取到，而後經過1、中的方式打印。

便可打印；

3、功能實現總結

我作這個打印是爲了打印一個面單就像包裹上面貼的，有收寄信息，公司log圖片，

1.通過測試，若是使用火狐瀏覽器,有可能圖片會變模糊（不排除是由於我操做方法沒對），可是一樣的操做在其餘瀏覽器，好比google沒有出現。（有些差別，用不一樣瀏覽器執行便可看出）

2.若是頁面是本身系統直接打印還好。若是是爲了給別人提供接口，讓對方得到頁面內容而打印，那麼，頁面中的路徑必定要帶http前綴，否則在對方域名下就沒有對應圖片。

3.打印有可能有頁眉頁腳，這個解決方法是 換合適的瀏覽器，好比google調用打印的時候就沒有頁眉頁腳，遨遊瀏覽器提供了顯示選擇。

3.尺寸不對應，由於頁面是用像素佈局，而打印是用的毫米之類的單位，這個是無法進行換算的，跟顯示器有關，可是咱們只要控制好總體長寬比就好，具體大小就無所謂了。而後打印時，好比遨遊瀏覽器，就能夠設置打印比例（其餘瀏覽器應該均可以）。根據實際需求調整便可。

其餘疑問：

1.有更好的方式好比有個 css的打印媒體類型（這個我不太懂，也沒多瞭解）等更好的解決前端打印需求的，還請多多交流補充。

2.是否能夠經過JS直接控制打印比例，和打印的頁面去留。（我沒有找到合適有效的方法）