vue 利用 vue-print-nb 实现打印功能遇到的问题

1.首先安装依赖

npm install vue-print-nb --save

2.引用。

import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print)

这里需要加上

import Vue from 'vue'

不然会报错

3.打印

 <iframe id="printTest" :src="previewUrl" class="el-body" align="center" /><el-button v-print="'#printTest'"></el-button>

这里可能会遇到一个问题：界面显示正常，打印预览的时候要不是空的，要不就是显示不全，大概就是样式不对，这是因为你要打印iframe样式的问题，可能你的样式<style rel="stylesheet/scss" lang="scss" scope><style > 里面给el-body写了一堆样式，但是打印的时候他不会去把这个样式加上去，这个时候我们只需要把class删掉，把样式写在iframe的style里面

<iframe id="printTest" :src="previewUrl" style="height:100%;width:100%" align="center" />

这样就不会有问题了。

vue 利用 vue-print-nb 实现打印功能遇到的问题相关推荐

vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
vue 使用浏览器自带打印机打印功能
本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题. 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页 ...
window.print()前端实现打印功能
方法介绍 window.print()方法用于打印当前窗口的内容. 默认打印页面中body里的所有内容. 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印配置. 1. 打印方法 1 ...
window.print()方法实现打印功能，多出一张空白页
项目内需要实现一个打印的功能,用了window.print()方法,但是在打印的时候总是多出一张空白页,偶然搜到了一篇文章,(https://blog.csdn.net/web_houzhanguo/ ...
Vue利用Vue.extend()实现自定义弹出框
运用场景:如果想实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,这时候Vue.extend + vm.$mount 组合就派上用场了. 简单介绍: Vue.ex ...
利用Websocket实现网页调用打印功能
https://blog.csdn.net/janwool/article/details/78540727 康虎云打印不错
js使用window.print()实现打印功能
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef">需要打印的内容 </div ...
window.print() 前端页面打印与预览PDF
window.print()打印是浏览器自带的打印,实现原理是将html转换为pdf可以在线预览打印或者导出pdf,在任何网页上可通过Ctil+p快捷键调出浏览器打印程序,它可将整个网页打印出来,在我 ...
MIS开发中.net Framework的打印功能
Microsoft .net Framework的打印功能都以组件的方式提供,为程序员提供了很大的方便,但是这几个组件的使用还是很复杂的,有必要解释一下. 打印操作通常包括以下四个功能 1 打印设置 ...

vue 利用 vue-print-nb 实现打印功能遇到的问题

vue 利用 vue-print-nb 实现打印功能遇到的问题相关推荐

最新文章

热门文章