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

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

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

具體來說，“德佟印立方危廢標(biāo)識解決方案”的優(yōu)勢可以歸納為3點(diǎn)。

操作簡單，高效便捷

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

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

適用性強(qiáng)，滿足不同企業(yè)危廢管理需求

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

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

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

“一鍵”掃碼打印網(wǎng)頁端二維碼

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

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

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

危廢管理工作的重要性越來越強(qiáng)，企業(yè)也應(yīng)審時度勢，及時提高危廢管理意識，升級迭代危廢管理方式，學(xué)會通過數(shù)字化工具讓危廢管理“快”起來，同時也讓企業(yè)的經(jīng)營管理提質(zhì)增效。

.首先引入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對中文支持不太好，，所以需要轉(zhuǎn)碼

//轉(zhuǎn)碼

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.最后進(jìn)行局部打印

//局部打印

function stamp(){

var bdhtml=window.document.body.innerHTML;//獲取當(dāng)前頁的html代碼

var odd=bdhtml;

var sprnstr="";//設(shè)置打印開始區(qū)域

var eprnstr="";//設(shè)置打印結(jié)束區(qū)域

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

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

window.document.body.innerHTML=prnhtml;

window.print();

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

//還原原網(wǎng)頁

window.document.body.innerHTML=odd;

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

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

window.location.reload();

}

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

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

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

發(fā)起打印的方法

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

<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) // 關(guān)閉現(xiàn)在所有的IE窗口，并打開一個新窗口 
  WebBrowser.ExecWB(4,1) // 保存網(wǎng)頁
  //--------------- 常用 --------------
  WebBrowser.ExecWB(6,1) // 打印
  WebBrowser.ExecWB(6,6) // 直接打印
  WebBrowser.ExecWB(7,1) // 打印預(yù)覽
  WebBrowser.ExecWB(8,1) // 打印頁面設(shè)置
  //------------------------------------- 
  WebBrowser.ExecWB(10,1) // 查看頁面屬性
  WebBrowser.ExecWB(15,1) // 撤銷
  WebBrowser.ExecWB(17,1) // 全選
  WebBrowser.ExecWB(22,1) // 刷新
  WebBrowser.ExecWB(45,1) // 關(guān)閉窗體無提示
</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/)調(diào)用，其中的options可以配置一些選項(xiàng)，具體看對應(yīng)的說明文檔。

采用第三方瀏覽器插件

收費(fèi)的、不收費(fèi)的都有，這里就不多提了。

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

局部打印

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

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

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

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

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

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

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

onbeforeprint 在設(shè)置頁面打印之后但是在打印對話框出現(xiàn)之前執(zhí)行 JavaScript

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

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.

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

分頁

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種辦法，但都有限制

使用插件實(shí)現(xiàn)

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

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

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

webbrowser實(shí)現(xiàn)

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

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

然后執(zhí)行

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

vb實(shí)現(xiàn)結(jié)合webbrowser實(shí)現(xiàn)

可以使用vb，但是IE11開始已經(jīng)被微軟廢棄，無法執(zhí)行vb代碼了。

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

無邊距打印

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

自定義頁碼

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

橫向打印

chrome 支持 @page 規(guī)則

@page{size : A4 lanscape;}

雙面打印

需要在打印首選項(xiàng)中設(shè)置。

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

打印份數(shù)

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

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

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商