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>

vue 中的打印局部打印相关推荐

在vue中实现单页面打印之cdn引入打印
虽然网上挺多的但我还喜欢自己的,先来看看原生javascript实现的打印上代码: 1.要打印的东西 2.预览打印 <!doctype html> <html> <hea ...
Vue 中Lodop 实现批量打印
打印初始化放到for循环外,遍历的数组长度有多少就打印多少, for循环里面还是 this.LODOP = getLodop(); 这些,只是把初始化提到外面,打印预览也提到for循环外
Vue中好用的打印组件 vue-print-nb
首先下载包 npm i vue-print-nb 按需引入页面并使用, 这个组件的好处是可以保留已有的样式, 不用写两套css (如果你使用的是print.js, 你是需要写两套css的) <d ...
vue中打印插件vue-print-nb(一)——基本示例
vue中打印插件vue-print-nb(一)--基本示例 npm地址:https://www.npmjs.com/package/vue-print-nb 下载print.js地址:https:// ...
vue打印模版-自定义模版-局部打印/使用插件vue-print-nb打印，打印样式设置
一.自定义模版打印功能: <template><div v-if="printVisible"><div id="printBox" ...
vue中使用v-on绑定事件中，获取$event.currentTarget，日志打印为null
问题:vue中使用v-on绑定事件中,获取$event.currentTarget,日志打印为null dom结构: <li @click="clickEvent('hello',$e ...
Vue 项目中使用Lodop进行打印
配置文件与地址 Lodop 插件下载.打印设计都在这个网址上面进行,过程不做过多赘述,相信大家在看文章前应该对Lodop有了一定的了解 Vue中引入Lodop所需的配置文件建议在项目中建一个自己的工 ...
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
Vue中Pdf预览及打印(自定义组件)
思路: 1. vue中使用ifream访问后台 2.封装共用vue组件 3.后台通过freemaker模板生成相应pdf 效果: 编写自定义组件PdfView.vue <template> ...

vue 中的打印局部打印

/LodopFuncs.js demo1

第三种情况

LodopFuncs.js demo2

vue 中的打印局部打印相关推荐

最新文章

热门文章

vue 中的打印 局部打印

/LodopFuncs.js demo1

第三种情况

LodopFuncs.js demo2

vue 中的打印 局部打印相关推荐

最新文章

热门文章

vue 中的打印局部打印

vue 中的打印局部打印相关推荐