危廢管理絕招：網頁二維碼竟然也能“一鍵掃碼打印”？

年，國家對危險廢物管理工作的嚴抓細管有目共睹。隨著更規范詳實的執行標準，以及更嚴厲的處罰措施相繼出臺，也對企業的危廢管理能力提出了新的要求和考驗。面對這一趨勢，“德佟印立方危廢標識解決方案”，受到了市場的普遍認可和青睞。

“德佟印立方危廢標識解決方案”包括德佟印立方DP12370危廢標簽打印機和“危廢標識管理”App，能簡單、快速地通過多種方式直接打印出符合規范標準的危廢標簽，包括網頁端的危廢二維碼，同時還能高效統籌標簽信息，方便企業隨時調用和查閱，有效解決了傳統危廢標識管理過程中的各種“疑難雜癥”。

具體來說，“德佟印立方危廢標識解決方案”的優勢可以歸納為3點。

操作簡單，高效便捷

首先，其可以直接藍牙連接后，使用手機編輯打印標簽，隨時隨地使用，不受場景限制。同時，工作人員在錄入時，使用配套的軟件就能直接識別營業執照、掃描營業執照二維碼添加組織信息，或者通過危廢代碼/類別/名稱來智能檢索相關信息，再“一鍵”生成數字識別碼和二維碼，快速完成標簽的打印制作，且制作出的標簽也完全符合規范。

另外，錄入期間，軟件還可以自動匹配《國家危險廢物名錄》數據，省去了繁瑣的輸入過程，提高了準確率，節省了工作時間。后續再需要調閱信息時，也只需要掃描二維碼即可，十分方便快捷。

適用性強，滿足不同企業危廢管理需求

在實際的危廢管理工作中，不同行業制作標簽的場景和需要的標簽尺寸可能不盡相同。這時候，就需要我們考慮到標簽管理工具的適用性。

在使用場景方面，“德佟印立方危廢標識解決方案”除了可以通過軟件錄入信息打印制作標簽外，還能直接連接德佟印立方DP12370危廢標簽打印機，制作打印企業自定義的二維碼標簽，以及網頁端二維碼。

標簽尺寸方面，德佟印立方DP12370危廢標簽打印機也提供了三種適配選擇，即100*100MM/150*150MM/200*200MM，企業可以根據需求自行選擇。

“一鍵”掃碼打印網頁端二維碼

眾所周知，許多用于上報危廢數據的省級危廢管理平臺系統都能生成對應的危廢二維碼，但生成后想要打印卻十分不方便，一方面有些平臺沒有標簽打印功能，另一方面有打印功能的平臺使用起來也十分繁瑣不便，難以操作。

針對這個問題，“德佟印立方危廢標識解決方案”給出了一個圓滿的解決辦法——一鍵掃碼打印網頁端二維碼。很簡單，只需打開德佟印立方“危廢標識管理”App，再掃描平臺網頁端生成的危廢二維碼，之后軟件會自動獲取數據生成標簽，再直接打印即可。

值得強調的是，“德佟印立方危廢標識解決方案”基本覆蓋了所有省份的危廢管理平臺，換句話說，其幾乎支持所有平臺的“一鍵掃碼”打印。

危廢管理工作的重要性越來越強，企業也應審時度勢，及時提高危廢管理意識，升級迭代危廢管理方式，學會通過數字化工具讓危廢管理“快”起來，同時也讓企業的經營管理提質增效。

.首先引入js插件

</script><script src="/Liems/plugins/aweto/jquery.PrintArea.js"></script>

2.然后再html中添加二維碼顯示的位置

<button id="bu" class='i-form-button' onclick="stamp()" style="display: none;">打印二維碼</button>

</div>

3.然后在js中寫入生成二維碼的方法

jQuery(function(){

//獲取身份證號碼

var idCard = $('#EOEMPMST__0__EEM_SFZ_COD').val();

var jsons=idCard+"|1";

var zhi=utf16to8(jsons);

//判斷是否新建

if(idCard != null && idCard != ''){

jQuery('#qrcode').qrcode({

render : "canvas",

width : 150,

height : 150,

text : zhi

});

//保存為圖片

$("canvas").attr("id","erw");

var canvas = document.getElementById('erw');

var context = canvas.getContext('2d');

var image = new Image();

var strDataURI =canvas.toDataURL("image/png");

document.getElementById('image').src = strDataURI;

document.getElementById('bu').setAttribute('style', 'display: block');

}

})

4.qrcode對中文支持不太好，，所以需要轉碼

//轉碼

function utf16to8(str) {

var out, i, len, c;

out = "";

len = str.length;

for(i = 0; i < len; i++) {

c = str.charCodeAt(i);

if ((c >= 0x0001) && (c <= 0x007F)) {

out += str.charAt(i);

} else if (c > 0x07FF) {

out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));

out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));

out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

} else {

out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));

out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

}

return out;

}

5.最后進行局部打印

//局部打印

function stamp(){

var bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼

var odd=bdhtml;

var sprnstr="";//設置打印開始區域

var eprnstr="";//設置打印結束區域

var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17); //從開始代碼向后取html

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html

window.document.body.innerHTML=prnhtml;

window.print();

//第二種打印jQuery('#wai').PrintArea();

//還原原網頁

window.document.body.innerHTML=odd;

document.getElementById('bu').setAttribute('style', 'display: none');

document.getElementById('image').src="";

window.location.reload();

}

方法中有業務處理，，忽略即可。大體思路如上，歡迎討論

前幫客戶做合同和協議打印的時候，收集過一些打印相關的資料，整理了一下內容，分享給有需要的朋友。

如何發起打印
如何只局部打印
分頁
不詢問直接打印
無邊距打印
自定義頁碼
橫向打印
雙面打印
打印多份

發起打印的方法

window.print() 打印整個頁面，所有主要瀏覽器都支持 print() 方法，執行后會啟動一個打印對話框，Chrome的打印對話框自帶預覽功能，IE、火狐只彈出打印設置對話框，沒有預覽功能。
document.execCommand("print") 該方式也兼容各個版本的瀏覽器，功能同window.print()一樣，不過已經不建議使用了。
使用html 標簽<object>引入Webbrowser控件，這種方式只兼容IE，部分調用方式如下：

<body>
  <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"></object>
</body>
<script>
  WebBrowser.ExecWB(1,1) // 打開 
  WebBrowser.ExecWB(2,1) // 關閉現在所有的IE窗口，并打開一個新窗口 
  WebBrowser.ExecWB(4,1) // 保存網頁
  //--------------- 常用 --------------
  WebBrowser.ExecWB(6,1) // 打印
  WebBrowser.ExecWB(6,6) // 直接打印
  WebBrowser.ExecWB(7,1) // 打印預覽
  WebBrowser.ExecWB(8,1) // 打印頁面設置
  //------------------------------------- 
  WebBrowser.ExecWB(10,1) // 查看頁面屬性
  WebBrowser.ExecWB(15,1) // 撤銷
  WebBrowser.ExecWB(17,1) // 全選
  WebBrowser.ExecWB(22,1) // 刷新
  WebBrowser.ExecWB(45,1) // 關閉窗體無提示
</script>

直接用JQuery插件

jquery.print.js 地址：https://github.com/DoersGuild/jQuery.print

jquery.print-preview.js 地址：https://github.com/etimbo/jquery-print-preview-plugin

通過$("#id").print(/options/)和$('#id').printArea(/options/)調用，其中的options可以配置一些選項，具體看對應的說明文檔。

采用第三方瀏覽器插件

收費的、不收費的都有，這里就不多提了。

復雜的套打可以選第三方插件。jQuery插件是封裝的print方法，我前幾年給銀行網點做了個小系統需要局部打印，選了插件，其實沒有很理想，需要自己做一些調整才行。大部分情況用print就能解決。

局部打印

頁面上顯示的內容與最終需要打印的內容之間總是存在差異的，從兩個方向解決這個問題，一個是打印時只顯示需要打印的部分，另一個是打印前調整頁面的內容，只保留需要打印的部分。可以用到下面幾個方法：

css media query 可以寫一些只在打印時有效的樣式，例如控制頁面某個按鈕打印時隱藏

@media print{
    .no-print{
        display:none
    }
}

可以用onbeforeprint和onafterprint在打印前重新編輯內容，專門送去打印，打印后又處理回來。

function window.onbeforeprint()
{ //將一些不需要打印的隱藏 }

function window.onafterprint()
{ //放開隱藏的元素 }

// polyfill
// 對于基于Webkit的瀏覽器，您可以創建一個等效的結果window.matchMedia('print')。
// var mediaQueryList = window.matchMedia('print');
// mediaQueryList.addListener('change', function(mql) {
//   if(mql.matches) {
//     console.log('webkit equivalent of onbeforeprint');
//   }
// });

onbeforeprint 在設置頁面打印之后但是在打印對話框出現之前執行 JavaScript

onafterprint 定義為在設置頁面打印且打印對話框已出現之后，執行一段 JavaScript。只有 Internet Explorer 和 Firefox 支持 onafterprint 事件屬性。但是：在 IE 中，onafterprint=屬性在打印對話框出現之前而不是之后發生。

onbeforeprint fired before dialog appears and allows one to change html and so on.onafterprint is fired just before dialog appears. It is not even possible to know, whether document was actually printed or user canceled it. Needless to say about when printing finished (if started at all).Again: no event is available to track anything happened in print dialog, i.e. answer to your question is no.Moreover, I hope what your need will never be implemented, cause this allows to frustrate user. He/she asks to print one document, but got something different.

改變頁面內容的方式體驗比較糟糕，個人不推薦，jq插件默認是用iframe，其實還可以window.open一個單獨的打印頁面，預覽和打印都好解決，兩種方式都需要注意樣式表是在原來的頁面，需要稍微注意下樣式是否有缺失。

分頁

page-break-before:always;
page-break-after:always;
page-break-inside:avoid;

用樣式可以控制主動使用分頁符，沒用過的可以看下這里

http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp

不詢問直接打印

有3種辦法，但都有限制

使用插件實現

網上下載ScriptX.cab文件
下載成功后將文件放在項目某個目錄下,然后在頁面body中寫上:

<object id="factory" name="factory" style="display: none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="ScriptX.cab" viewastext></object>

codebase屬性為ScriptX.cab文件的放置路徑(絕對路徑)
調用：factory.printing.Print(false)即可

webbrowser實現

需要修改IE瀏覽器安全設置，否則還是會彈出對話框

安全 -> 本地Intranet -> 自定義級別 - 找到ActiveX控件和插件項,選擇對未標記為可安全執行的ActiveX控件初始化并執行腳本,再選擇啟用
安全 -> 受信任的站點 -> 自定義級別 - 找到ActiveX控件和插件項,選擇對未標記為可安全執行的ActiveX控件初始化并執行腳本,再選擇啟用
安全 -> 受信任的站點 -> 站點 -> 添加受信任訪問站點(如果是訪問遠程那么是對方IP地址,如果是本地則是本機IP.例如http://192.168.172.1)

然后執行

document.getElementById('WebBrowser').ExecWB(6,2,3)

vb實現結合webbrowser實現

可以使用vb，但是IE11開始已經被微軟廢棄，無法執行vb代碼了。

execScript('document.getElementById("WebBrowser").ExecWB 6, 2, 3','vbscript');

無邊距打印

無邊距打印是打印機的一種功能，即全幅打印，打印紙不留空白。
適用于照片打印，廣告打印，海報打印等。
目前的主流打印機都有支持該功能的型號。
當在應用程序中創建用于打印的數據時，需要調整數據到打印紙的尺寸。如果應用程序中有邊距設置，應確保在打印前將它們設為零。
注意：
使用此功能進行打印將比普通打印要花更長時間。
使用此功能打印輸出的頂部和底部區域的打印質量可能會下降，或者在上面未列出的介質上打印時該區域可能會污損。在打印大量的作業之前先打印一頁以檢查打印質量。

自定義頁碼

遇到的一個需求，只打印合同中需要填寫數據的幾頁，不能使用自帶的頁碼，所以把自帶的頁碼去掉，然后寫個div定位到原來頁碼的位置，里面的內容就可以自己控制了。需要注意：
1. 頁面打印區域的原因，不是在任意打印機上都可以把頁碼打印在紙張的邊緣，需要根據打印機的可打印區域調整。
2. 頁碼需要使用到絕對定位，所以要求打印的內容是確定的，目前遇到有這個需求的，打印內容也都是固定的。

橫向打印

chrome 支持 @page 規則

@page{size : A4 lanscape;}

雙面打印

需要在打印首選項中設置。

注意：有時候需要通過加個空白頁來讓后面的內容從新的一張紙開始打印。

打印份數

打印設置里可以修改，不過很難用程序控制打印份數。可以曲線實現，在打印的時候，直接把內容重復N遍再打印一份出來的就是N份了。

時代變得真快，現在的IE都已經退出了歷史舞臺。新框架一個接一個冒出來，老系統里的這些老代碼，不知道什么時候會消失。

在線咨詢

上一篇：精美html個人主頁
下一篇：html中怎樣獲取當前元素的高度？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商