博客

vue 中的打印 局部打印

  • Post author:
  • Post category:vue


下载print.js

print


下载在项目main.js导入

main.js 

import Print from '../config/print'
Vue.use(Print)

.vue

局部打印了快递单号，里面有base 64的图片 

<div ref="printarea" v-html="parinlist">
         <div v-html="parinlist">{{parinlist}}</div>
      </div>

根据接口返回
if (res.status === 200) {
   this.parinlist = res.result;
   console.log(this.parinlist);
   this.$print(this.$refs.printarea);
}

有时可能会遇到初始打开为白板，或者点开一条信息打印的还是上一条信息的时候

加上 

this.$nextTick(() => {
     this.$print(this.$refs.printarea);
      });



/LodopFuncs.js demo1


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
        <param name="Caption" value="显示区">
        <param name="Border" value="0">
        <param name="Color" value="white">
        <embed id="LODOP_EM" TYPE="application/x-print-lodop" width=0 height=0 border=0 Color="white" PLUGINSPAGE="install_lodop.exe">
    </object>
    <script src="http://www.kdniao.com/assets/js/Lodop/LodopFuncs.js"></script>
</head>
<body>
  模板内容1：  <textarea id="TextArea1" rows="32" cols="120"></textarea><br /><br />
  模板内容2：  <textarea id="TextArea2" rows="32" cols="120"></textarea><br /><br />
    是否预览：<input id="IsPreview" type="text" value="1" />   1-预览，0-直接打印
    打印机名称：<input id="PrintName" type="text"  />
   &nbsp;  &nbsp; <input id="Button1" onclick="GetSuccess();" type="button" value="打印" />
    <br /><br /><br /><br />
    <script type="text/javascript">

        var LODOP;
        function GetSuccess() {
          
            LODOP = getLodop(document.getElementById('LODOP'), document.getElementById('LODOP_EM'));
            


                  
                    var isPreview = document.getElementById("IsPreview").value;

                    if (isPreview == "1") {
                      
                    LODOP.PREVIEW();
                }
                    else {
                        var printName = document.getElementById("PrintName").value;
                        if (LODOP.SET_PRINTER_INDEX(printName)) {
                        LODOP.PRINT();
                    }
                }
         
           
        }
      
    </script>
</body>



</html>



第三种情况

上面的两种情况用在一切顺利的情况下， 上线后访问不到CLodopfuncs.js 所以打印不生效

我这边对接的是快递鸟的打印，快递单一般都是特定的打印机，下面是HTML格式的两个demo



LodopFuncs.js demo2

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
        <param name="Caption" value="显示区">
        <param name="Border" value="0">
        <param name="Color" value="white">
        <embed id="LODOP_EM" TYPE="application/x-print-lodop" width=0 height=0 border=0 Color="white" PLUGINSPAGE="install_lodop.exe">
    </object>
    <script src="http://www.kdniao.com/assets/js/Lodop/LodopFuncs.js"></script>
</head>
<body>
  模板内容1：  <textarea id="TextArea1" rows="32" cols="120"></textarea><br /><br />
  模板内容2：  <textarea id="TextArea2" rows="32" cols="120"></textarea><br /><br />
    是否预览：<input id="IsPreview" type="text" value="1" />   1-预览，0-直接打印
    打印机名称：<input id="PrintName" type="text"  />
   &nbsp;  &nbsp; <input id="Button1" onclick="GetSuccess();" type="button" value="打印" />
    <br /><br /><br /><br />
    <script type="text/javascript">

        var LODOP;
        function GetSuccess() {
          
            LODOP = getLodop(document.getElementById('LODOP'), document.getElementById('LODOP_EM'));
            LODOP.PRINT_INIT("");

            var json = document.getElementById("TextArea1").value;
            if (json != "") {
                LODOP.NewPage();
                var strFormHtml = "<body>" + json + "</body>";
                LODOP.ADD_PRINT_HTM(0, 1, "100%", "100%", strFormHtml);
            }
            var json2 = document.getElementById("TextArea2").value;
            if (json2 != "") {
                LODOP.NewPage();
                var strFormHtml2 = "<body>" + json2 + "</body>";
                LODOP.ADD_PRINT_HTM(0, 1, "100%", "100%", strFormHtml2);
            }

                  
                    var isPreview = document.getElementById("IsPreview").value;

                    if (isPreview == "1") {
                      
                    LODOP.PREVIEW();
                }
                    else {
                        var printName = document.getElementById("PrintName").value;
                        if (LODOP.SET_PRINTER_INDEX(printName)) {
                        LODOP.PRINT();
                    }
                }
         
           
        }
      
    </script>
</body>



</html>


版权声明：本文为qq_45101496原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。