vue页面打印可自动分页

一、最简单的方法
强制分页

<div style="page-break-after: always;"></div>

二、复杂一点的方法：
1.可填写打印张数，自动分页，在浏览打印中设置纸张大小、边距及缩放调整位置，使打印页面居中。
缺点:打印分页不稳定，没有自适应，需自己调整大小位置
如图所示

2.详细代码如下

<!-- 标签弹窗 --><Modal width="250" :mask-closable="false" v-model="modalShow" title="标签打印"><Table stripe :columns="modal_title" :data="modal_data"></Table><div slot="footer"><Button type="primary" @click="close">关闭</Button></div></Modal>
<!-- 标签打印 --><Modal width="420" v-model="modalPrintShow" title="送货单"><div id="printContent" style="width:420px;"><div v-for="(item,i) in arrList"><div class="flex-c"><div style="font-size:15px;color: #000;font-family:'黑体';font-weight:500;"><span>浙江金华</span><span style="margin-left:10px;">物料标签卡</span></div><vue-qr :text="`${modalNameList.materialNum}##${modalNameList.qty}##${modalNameList.suppCode}##${modalNameList.billNum}##${modalNameList.entryId}`" :size="45" :margin="5"></vue-qr></div><div style="margin:0px 0px 10px 0px;display:flex;justify-content:center;"><table border="1" class="printTable"><tr><td>供应商</td><td colspan="5">{{modalNameList.supp}}</td></tr><tr><td>单据编号</td><td colspan="5">{{modalNameList.billNum}}</td></tr><tr><td>品名</td><td colspan="5">{{modalNameList.materialName}}</td></tr><tr><tr><td>物料编码</td><td colspan="5">{{modalNameList.materialNum}}</td></tr><td>交货日期</td><td style="width:110px;" colspan="2">{{modalNameList.deliveryDate}}</td><td>数量</td><td style="width:110px;" colspan="2">{{modalNameList.qty}}</td></tr><tr><td>申报部门</td><td colspan="2">{{modalNameList.applyDeptName}}</td><td>申请人</td><td colspan="2">{{modalNameList.applyPersonName}}</td></tr><tr><tr><td>备注</td><td colspan="5">{{modalNameList.remark}}</td></tr></table></div></div></div><div slot="footer"></div></Modal>
<script>
import '@/assets/js/jquery-vendor'// 方法 2
import 'jQuery.print' // 方法 2
import printHtml from '@/components/print.js'//引入封装打印的文件★★★★★
import VueQr from 'vue-qr';//引入二维码
export default{components: {VueQr},
}
data(){return{arrList:[],modalNameList:{},modal_title:[{title: "打印张数",width: 120,render: (h, params) => {let arr1 = [h("InputNumber", {props: {'active-change':false,value: 1,min:1,},on: {input: (val) => {this.modal_data[params.index].boxNumber = val;params.row.boxNumber = val},},}),];return h("div", arr1);},},{title: "操作",width: 80,fixed: "right",render: (h, params) => {let arr1 = [h("Button",{props: {type: "primary",size: "small",},on: {click: () => {let d = params.row // 单行数据this.bqPrint(d)}},},"打印"),];return h("div", arr1);},},],}
}
methods(){//打印★★★★★bqPrint(d){this.arrList = []//分页的空数组，里面有几个对象就有几页this.modalNameList = dlet num = d.boxNumber//num是填写的打印页数let obj = {num:num}for (let i = 0; i < num; i++) {this.arrList.push(obj)}// this.modalPrintShow = truethis.$nextTick(() => {//this.$nextTick是强制刷新页面，防止打印的内容为空setTimeout(function () {//定时器延时是等待页面数据刷新完在打印let newstr = document.getElementById("printContent").innerHTML//newstr为打印的页面printHtml(newstr)//调用引入的文件方法printHtml},500)})},
}
</script>

3.printHtml 封装文件

export default function printHtml (html) {let style = getStyle()let container = getContainer(html)document.body.appendChild(style)document.body.appendChild(container)getLoadPromise(container).then(() => {window.print()document.body.removeChild(style)document.body.removeChild(container)})
}// 设置打印样式
function getStyle () {let styleContent = `#print-container {display: none;
}
@media print {body > :not(.print-container) {display: none;}html,body {margin: 0 0.2cm;display: block !important;height:auto;}#print-container {display: block;}@page {margin: 0.25cm 0;}
}`let style = document.createElement('style')style.innerHTML = styleContentreturn style
}// 清空打印内容
function cleanPrint () {let div = document.getElementById('print-container')if (div) {document.querySelector('body').removeChild(div)}
}// 新建DOM，将需要打印的内容填充到DOM
function getContainer (html) {cleanPrint()let container = document.createElement('div')container.setAttribute('id', 'print-container')container.innerHTML = htmlreturn container
}// 图片完全加载后再调用打印方法
function getLoadPromise (dom) {let imgs = dom.querySelectorAll('img')imgs = [].slice.call(imgs)if (imgs.length === 0) {return Promise.resolve()}let finishedCount = 0return new Promise(resolve => {function check () {finishedCount++if (finishedCount === imgs.length) {resolve()}}imgs.forEach(img => {img.addEventListener('load', check)img.addEventListener('error', check)})})
}

vue页面打印可自动分页相关推荐

work02_vue页面打印水印
前言项目生成公司水印是很普遍的需求,下面是vue项目生产水印的方法.话不多说,复制粘贴就可以马上解决你的需求 ①. vue页面打印水印[一] ①. 创建watermark.js文件 /** 水印添加 ...
html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...
写在前面:注意打印表格时,若需要多页打印,则尽量使用原生table元素实现,这样在分页时每页顶部会带有表头,用户体验比较好一.引用插件(在 main.js 中全局引入!!注意,需要修改源码,所以尽量 ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
vue html页面打印功能vue-print-nb
vue项目中,HTML页面打印功能组件vue-print-nb 源码: https://github.com/shengbid/vue-print, https://github.com/sheng ...
Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印示例官网地址可以下载最新版官网下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应. 解决 ...
vue 页面跳转404_Vue 项目棘手问题的解决方案
1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出 ...
jqprint 分页打印_JS实现页面打印（整体、局部）
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印现在就轻松实现了页面的打印,但是这种方 ...
vue-print-nb 实现页面打印（含分页打印）
Web 实现页面打印安装官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装打印组件 npm install vue-print-nb ...

vue页面打印可自动分页

vue页面打印可自动分页相关推荐

最新文章

热门文章