js打印（控件）及多種方式

本文轉載自查看原文 2014-03-14 09:37 3562 JavaScript

非常好用的LODOP打印控件

Lodop打印控件簡單使用方法
1.安裝。
2.調用LodopFuncs.js文件。
3.增加OBJECT對象
<script language="javascript" src="LodopFuncs.js"></script>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
<embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
</object>
4.獲取
<script language="javascript">
var LODOP=getLodop(document.getElementById('LODOP'),document.getElementById('LODOP_EM'));
</script>
5.調用函數
LODOP.函數名
（1）打印初始化（PRINT_INIT）
（2）設定紙張大小（SET_PRINT_PAGESIZE）
（3）增加打印項
---ADD_PRINT_HTM-增加超文本打印項(普通模式)
---ADD_PRINT_TABLE-增加表格打印項（超文本模式）
---ADD_PRINT_TEXT-增加純文本打印項
---ADD_PRINT_IMAGE-增加圖片打印項
---ADD_PRINT_BARCODE-增加條形碼
（4）設置打印項風格（SET_PRINT_STYLEA）
（5）強制分頁（NEWPAGEA）
（6）打印
---PREVIEW-打印預覽
---PRINT-直接打印
---PRINT_SETUP-打印維護-目標使用者是最終用戶
---PRINT_DESIGN-目標使用者是軟件開發者

附：計量單位
本文所述px單位固定換算關系如下,與像素類似但不是一個概念，也不受顯示影響：
1in(英寸)=2.54cm(厘米)=25.4mm(毫米)=72pt(磅)=96px
另外一個特殊的計量單位“%(百分比)”，是指相對於紙張大小的百分比值，其中“上、下邊距、高度”等的百分比是相當對於紙張高度（橫向打印時則是寬度）的比值，而“左、右邊距和寬度”的百分比是相對於紙張寬度（橫向打印時則是高度）的比值。

提示：打印預覽時，虛線之外是物理不可打區域，不同的打印機其物理邊距不一樣

-------------------------------------------------------------------------------
邊距：LODOP控件設置邊距
每個打印項上邊距、左邊距，及紙張的寬度。
例：要設置左右邊距為5px,可設置
LODOP.SET_PRINT_PAGESIZE(1, “200px”, “800px”, “”);
LODOP.ADD_PRINT_TABLE(“0”,”5px”,”190px”,””,document.getElementById(“my_tab”));//左右邊距都為5px;
-------------------------------------------------------------------------------
打印寬度確定，長度不確定：
LODOP.SET_PRINT_PAGESIZE(3,”260px”,”10px”,””);
var table_height= document.getElementById(“my_tab”))..offsetheight();
LODOP.ADD_PRINT_TABLE(“0”,”5px”,”190px”, table_height,document.getElementById(“my_tab”).innerHTML);
-------------------------------------------------------------------------------

首先需要下載、引用JS 腳本

<title>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0"
        height="0">
    </object>
</title>

 <asp:Label ID="Label2" runat="server" Text="分店："></asp:Label><asp:Label ID="FendName"
                    runat="server" Text=""></asp:Label>&nbsp;
                <asp:Label ID="Label3" runat="server" Text="日期："></asp:Label>
                <asp:TextBox ID="tBdate" runat="server" Width="95px" Height="18px" CssClass="Wdate"
                    onfocus="WdatePicker()"></asp:TextBox>&nbsp;至
                <asp:TextBox ID="tEdate" runat="server" Width="95px" Height="18px" CssClass="Wdate"
                    onfocus="WdatePicker()"></asp:TextBox>

 <input type="button" onclick="Preview()" class="zdfbtn" value="打 印" style="width: 70px;
                    height: 25px;" />&nbsp;

<div style="height: auto; width: 900px; white-space: nowrap; overflow-x: visible;
        overflow-y: auto; white-space: normal; word-break: break-all; overflow: hidden;"
        id="tem">
            <table  class="oa-el-grid-list" cellspacing="0" cellpadding="0" border="0" style="width: 80%;
                font-size: 12px;" id="tb">
                <%=sMingXi%>
            </table>
    </div>

 
        function CreatePrintPage() {
            LODOP = getLodop();
            LODOP.PRINT_INIT("營業客賬報表");
            LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4紙張縱向打印
            LODOP.SET_PRINT_STYLE("FontSize", 18);
            var strBodyStyle = "<style>table,td { border: 1 solid #000000;border-collapse:collapse;text-align: center; Font-Size:18px;float:left;}</style>";
            var strFormHtml = strBodyStyle + "<body>" + document.getElementById("tem").innerHTML + "</body>";
            LODOP.ADD_PRINT_HTM(140, 20, 1100, 500, strFormHtml); //需要打印的文本
            LODOP.SET_PRINT_STYLEA(0, "FontSize", 18);
            var myDate = getNowFormatDate(); //獲取到時間
            var a = document.getElementById("txtStatDate").value;
            var b = document.getElementById("txtEndDate").value;
            var name = document.getElementById("FendName").innerText;
            // 設置打印打字 需要引用 js <script type="text/javascript" src="../../js/LodopFuncs.js">
            LODOP.ADD_PRINT_TEXT(43, 500, 163, 35, "營業客賬報表");
            LODOP.SET_PRINT_STYLEA(0, "FontSize", 18); //設置上一句樣式
            LODOP.ADD_PRINT_TEXT(3, 500, 163, 35, name);
            LODOP.SET_PRINT_STYLEA(0, "FontSize", 18); //設置上一句樣式
            LODOP.ADD_PRINT_TEXT(89, 40, 400, 20, "查詢條件：" + a + "至" + b);
            LODOP.SET_PRINT_STYLEA(0, "FontSize", 14); //設置上一句樣式
            LODOP.ADD_PRINT_TEXT(89, 800, 400, 20, "打印時間:" + myDate);
            LODOP.SET_PRINT_STYLEA(0, "FontSize", 14);
            LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //整寬 不變形
            //四個數值分別表示Top, Left, Width, Height
        };
        var LODOP;
        function Design1() {
            CreatePrintPage();
            //        LODOP.SET_SHOW_MODE("HIDE_ITEM_LIST",true);//設置對象列表默認處於關閉狀態
            LODOP.SET_SHOW_MODE("TEXT_SHOW_BORDER", 1); //設置字符編輯框默認為single    
            LODOP.PRINT_DESIGN();
        };

或

 <script src="../script/LodopFuncs.js" type="text/javascript"></script>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0"
        height="0">
    </object>

 <script language="javascript" type="text/javascript">
        function Preview() {
            CreatePrintPage();
            LODOP.PREVIEW();
        };
        function CreatePrintPage() {
           //            LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_設置預覽窗口界面");
//            LODOP.SET_PRINT_PAGESIZE(1, 1380, 880, "");
//            LODOP.ADD_PRINT_TEXT(80, 100, 400, 35, "觀察預覽窗口的變化");
//            LODOP.SET_PRINT_STYLEA(0, "FontSize", 30);

//            LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "");
//            LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, "");
//            LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1); //橫向時的正向顯示
            //LODOP.PREVIEW();    

            LODOP.PRINT_INIT("消費明細單打印");
            LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "A4"); //A4紙張縱向打印
            LODOP.ADD_PRINT_HTM(40, 40, 1000, 500, document.getElementById("print").innerHTML);
            LODOP.SET_PRINT_STYLEA(1, "FontSize", 8);
            LODOP.ADD_PRINT_HTM(2, "30%", 740, 40, "<p style=\"text-align: center;Font-Size:20px;FONT-WEIGHT: bold\">消費明細單打印</p>");
            LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //
            LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1); //橫向時的正向顯示
        };時的正向顯示
    </script>

var LODOP;

<script language="javascript" type="text/javascript">
        function Preview() {
            CreatePrintPage();
            LODOP.PREVIEW();
        };
        function getNowFormatDate() {
            var day = new Date();
            var Year = 0;
            var Month = 0;
            var Day = 0;
            var Hours = 0;
            var Minutes = 0;
            var CurrentDate = "";
            Year = day.getFullYear(); //支持IE和火狐瀏覽器.
            Month = day.getMonth() + 1;
            Day = day.getDate();
            Hours = day.getHours();
            Minutes = day.getMinutes();
            CurrentDate += Year;
            if (Month >= 10) {
                CurrentDate += "-" + Month;
            }
            else {
                CurrentDate += "-0" + Month;
            }
            if (Day >= 10) {
                CurrentDate += "-" + Day;
            }
            else {
                CurrentDate += "-0" + Day;
            }
            if (Hours >= 10) {
                CurrentDate += " " + Hours;
            }
            else {
                CurrentDate += " 0" + Hours;
            }
            if (Minutes >= 10) {
                CurrentDate += ":" + Minutes;
            }
            else {
                CurrentDate += ":0" + Minutes;
            }
            return CurrentDate;
        };
        function CreatePrintPage() {
            LODOP.PRINT_INIT("收銀員查詢");
            LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4紙張縱向打印
            LODOP.SET_PRINT_STYLE("FontSize", 18);
            var strBodyStyle = "<style>table,td { border: 1 solid #000000;border-collapse:collapse;text-align: center; Font-Size:13px;float:left;}</style>";
            var strFormHtml = strBodyStyle + "<body>" + document.getElementById("tem").innerHTML + "</body>";
            LODOP.ADD_PRINT_HTM(85, 40, "RightMargin:0.9cm", "BottomMargin:9mm", strFormHtml); //打印間隙或寬高設置
            LODOP.SET_PRINT_STYLEA(0, "Offset2Top", -50);//調整第二頁上部間距
            var myDate = getNowFormatDate(); //獲取到時間
            var a = document.getElementById("KeyValue_WHRQ").value;
            var b = document.getElementById("TextBox2").value;
            var name = document.getElementById("FendName").innerText;
            var txtSelect = "";
            if (document.getElementById("DropDownList1").value != "-請選擇-") {
                txtSelect += "&nbsp;&nbsp;操作員:" + document.getElementById("DropDownList1").options[document.getElementById("DropDownList1").selectedIndex].text;
            }
            if (document.getElementById("DropDownList2").value != "-請選擇-") {
                txtSelect += "&nbsp;&nbsp;班次:" + document.getElementById("DropDownList2").options[document.getElementById("DropDownList2").selectedIndex].text;
            }
            var str = "<body>";
            str += "<table style='Width:680px;'>";
            str += "<tr style=\"text-align: center;\">";
            str += "<td colspan=\"3\" style=\"position:relative;left:80px;Font-Size:20px;table-layout: fixed;word-break: break-all;FONT-WEIGHT: bold\">" + name + "</td>";
            str += "</tr>";
            str += "<tr style=\"text-align: center;\">";
            str += "<td colspan=\"3\" style=\"position:relative;left:80px;Font-Size:20px;table-layout: fixed;word-break: break-all;FONT-WEIGHT: bold\"> 收銀員查詢</td>";
            str += "</tr>";
            str += "<tr>";
            str += "<td style='border:0px solid red;position:relative; top:4px; left:5px;'colspan='3'>查詢條件:" + a + "至" + b + txtSelect + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打印時間:" + myDate + "</td>";
            str += "</tr>";
            str += "</table>";
            str += "</body>";
            LODOP.ADD_PRINT_HTM(2, 30, 740, 500, str);
            LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //整寬 不變形
        };    
    </script>

幫助：http://www.lodop.net/demo.html

點擊下載打印預覽控件

自帶打印：

<!--//普通打印-->

<title> 
<object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0"
        width="0">
    </object>
</title> 

 <script language="Javascript" type="text/javascript">
function pritinf(objtitle) {
    var nw = window.open('', '', 'width=900,height=600');
    nw.document.write('<meta http-equiv="content-type" content="text/html;charset=utf-8">');
    nw.document.write('<link rel="stylesheet" type="text/css" href="../../css/skin-green.css" />');
    nw.document.write('<link rel="stylesheet" type="text/css" href="../../css/main.css" />');
    nw.document.write('<style media="print" type="text/css"> ');
    nw.document.write('.Noprint{display:none;} ');
    nw.document.write('.PageNext{page-break-after: always;} ');
    nw.document.write('</style> ');
    nw.document.write('<body  bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0">');
    nw.document.write("<object classid='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2' id='wb'height='0' width='0'></object>");
    nw.document.write("<center>"+objtitle+"<br /><br />"+document.getElementById("tb").outerHTML+"</center>");
    nw.document.write("<scrip" + "t>docume nt.all.wb.ExecWB(7,1)</sc" + "ript>");
    nw.document.write('</body>');
    document.getElementById("wb").ExecWB(7,1);
}

        function preview() {
            bdhtml = window.document.body.innerHTML;
            sprnstr = "<!--startprint-->";
            eprnstr = "<!--endprint-->";
            prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
            window.document.body.innerHTML = prnhtml;
            window.print();
        }
    </script>

 <!--startprint-->
            <table id="tb" border="0" cellpadding="0" cellspacing="0" class="oa-el-grid-list"
                style="font-size: 12px; width: 100%;">
                <%=TableHtml %>
            </table>
        <!--endprint-->


 <input type="button" onclick="Preview();" class="zdfbtn" value="打 印" style="width: 70px;
                    height: 25px;" />&nbsp;

 <!--或-->

   <input type="button" class="oa-el-btn-minlen" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)" />
                <input type="button" class="oa-el-btn-minlen" value="頁面設置" onclick="document.all.WebBrowser.ExecWB(8,1)" />
                <input type="button" class="oa-el-btn-minlen" value="打印預覽" onclick="document.all.WebBrowser.ExecWB(7,1)" />

小票打印

 <script language="javascript" type="text/javascript">
        function Preview() {
            CreatePrintPage();
            LODOP.PREVIEW();
        };
        function CreatePrintPage() {
            LODOP.PRINT_INIT("入住登記單打印");
            LODOP.ADD_PRINT_HTM(10, 10, 280, 880, document.getElementById("print").innerHTML); //880原來800 ——5.8修改 230=》280
            LODOP.SET_PRINT_STYLEA(1, "FontSize", 8);

        };    
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生Js日歷控件-多種狀態可選 JS打印——第三方控件打印 js數組去重的多種實現方式 JS中循環的多種使用方式 JS數據打印的幾種方式【打印】windows打印控件，Lodop.js介紹使用lodop.js打印控件打印table並分頁等 js多種監聽事件方式的區別 js創建對象的多種方式及優缺點 js 中多維數組的深拷貝的多種實現方式