vue 使用浏览器自带打印机打印功能

本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。

引入安装vue-print.js

cnpm i vue-printjs --save-dev

解决打印多页只出现一页问题
由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装

下载 print.js
https://github.com/zxc19890923/print/blob/master/print.js
在src目录下面创建plugins/print/Print.js文件保存插件内容

修改 print.js

// 搜索getStyle方法，添加：str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";getStyle: function () {var str = "",styles = document.querySelectorAll('style,link');for (var i = 0; i < styles.length; i++) {str += styles[i].outerHTML;}str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";return str;},

main.js中引入插件

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

vue文件中的使用

<template><div ref="print" class="app-container" id="print"><el-form><el-form-item><div><b>姓 名</b></div><el-input v-model="user.name"></el-input></el-form-item><el-form-item><div><b>身份证号</b></div><el-input v-model="user.card_id"></el-input></el-form-item><el-form-item><div><b>护 照 号</b></div><el-input v-model="user.passport_id"></el-input></el-form-item><el-row><el-col :span="4" style="margin-right:20px;"><div><b>收样时间</b></div><el-date-pickerclass="date-box"type="date"v-model="user.receive_date"value-format="yyyy-MM-dd"></el-date-picker></el-col><el-col :span="4" style="margin-right:20px;"><div><b>检测时间</b></div><el-date-picker type="date" v-model="user.detect_date" value-format="yyyy-MM-dd"></el-date-picker></el-col></el-row><el-form-item><div><b>检测方法</b></div><el-select style="width:100%;" v-model="user.detect_way" placeholder="请选择检测方法"><el-option v-for="item of way" :label="item.label" :value="item.name"></el-option></el-select></el-form-item><el-form-item><div><b>检测结果</b></div><el-select style="width:100%;" v-model="user.detect_fruit" placeholder="请选择检测结果"><el-option v-for="item of result" :label="item.label" :value="item.name"></el-option></el-select></el-form-item><el-form-item class="no-print"><el-button type="primary" @click="submit()">只提交</el-button><el-button type="primary" @click="printContext">打印并提交</el-button></el-form-item></el-form></div>
</template>

methods: {//打印printContext() {this.$print(this.$refs.print);}// 不打印方法1. 添加no-print样式类// 不打印方法2. this.$print(this.$refs.print,{'no-print':'.do-not-print-div'})}

打印结果

vue 使用浏览器自带打印机打印功能相关推荐

vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
vue中使用Lodop调用打印机打印条形码
最近项目遇到vue实现条形码打印功能,经过自己的一番摸索,找到了一款比较友好的打印插件,本次打印使用的Lodop插件进行功能的实现.(官网链接) 1.把官方提供的LodopFuncs.js文件保存到某 ...
【转】VS2013自带报表+打印功能
VS自带报表控件和打印功能,这样就给我们这些编程者带来了很大的方便.下面就将我做程序的一些小经历来跟大家一起分享一下. 1,我们右击U层所在文件夹添加"新建项". 2,在弹出的的添 ...
Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印示例官网地址可以下载最新版官网下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
Vue将HTML内容用打印机打印出来
首先导入第三方插件 npm install vue-print-nb --save 在main.js中引入 import Print from 'vue-print-nb' Vue.use(Print ...
MFC 实现打印机打印功能
Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...
avue-crud自带的打印功能BUG，在打印时会打印操作栏
问题描述打印时会显示操作栏问题解决效果代码如下: 用插槽自定义打印按钮,记得去掉option中的printBtn:true, 此处的打印,在试了很多组件后,决定使用vxe-table的打印组件 ...
react 前端实现打印机打印功能
首先在页面中引入打印的页面设置id 以便打印的时候获取到. 我们的打印页面先创建一个这个文件进行通过type选择需要打印的数据页面,其中的tableModal就是我们这次要打印的数据页面.在这个文件 ...
关闭Vue计算属性自带的缓存功能
使用Vue的小伙伴都会知道,vue的计算属性.这个是这个样子解释的,当某些依赖值发生变化的时候,其自身的值也会发生变化,与之先关的DOM也会发生变化,通常呢,这个计算属性里面都会有两个方法:get和s ...

vue 使用浏览器自带打印机打印功能

vue 使用浏览器自带打印机打印功能相关推荐

最新文章

热门文章