html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...

写在前面：注意打印表格时，若需要多页打印，则尽量使用原生table元素实现，这样在分页时每页顶部会带有表头，用户体验比较好

一、引用插件(在 main.js 中全局引入！！注意，需要修改源码，所以尽量下载依赖到本地)

import './style/print.scss'

import Print from '@/libs/print.js'

Vue.use(Print);

在js依赖里面找到这个方法，添加如下备注所示的一行代码

getStyle: function () {

var str = "",

styles = document.querySelectorAll('style,link');

for (var i = 0; i < styles.length; i++) {

str += styles[i].outerHTML;

}

str += "";

/*@@备注！！添加此行可以多页自动分页*/

str += "";

return str;

}

二、调用方法

打印

因为业务需要，所有table均需要打印，所以封装了组件，table统一放在slot里，打印时取自己想打印的区域即可

printContent() {

this.$print(this.$refs['print-content'])

三、设置打印样式

@media print {

// 这里写自己需要的样式

}

以上就可以实现vue部分打印页面啦~

html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...相关推荐

idea打印sql的插件_[Mybatis]-[基础支持层]-插件-自定义简易SQL打印插件
该系列文章针对 Mybatis 3.5.1 版本在 mybatis 中允许针对 SQL 在执行前后进行扩展操作,而这些扩展操作也叫做插件. 在 Mybaits 中允许用插件来拦截的方法包括: Exe ...
Vue表格滚动到页面顶部，表头固定
大致思路:监听页面根元素的滚动事件,判断表格节点距页面顶部的距离offsetTop减去被表格被卷的高度scrollTop是否大于零,大于零,未到页面顶部,隐藏自定义表头,小于零,将自定义表头展示出来 ...
关于表格分页缓存数据
关于表格分页缓存数据常规情况下在日常工作中,我们翻页的时候都是通过请求来获取接口数据并渲染在表格中,只需要变动page,size就可以实现如: getList() {this.$api.getS ...
html打印表格自动分页,Web分页打印细线表格+分页打印之终极攻略
Web分页打印细线表格+分页打印之终极攻略发布时间:2009-03-01 23:46:40 作者:佚名我要评论最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面 ...
Java实现表格打印翻页_简单又实用的小文章来了----表格分页打印的那些小事（2）...
前言之前写过一篇表格分页打印的实践,其基本思路是按照一比一还原打印宽高,然后根据页面高度内容以及内容长度进行粗略计算,针对不能显示的进行内容分割. 相比上次逻辑稍微繁琐一点,今天分享的方式是更加简单 ...
html分页表格中的线条,HTML_Web分页打印细线表格+分页打印之终极攻略，最近给客户做打印的时候，客 - phpStudy...
Web分页打印细线表格+分页打印之终极攻略最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面的内容,因为头部有背景和打印按钮,而且要细线表格的那种,我想细线表格不是很简单吗 ...
vue打印模版-自定义模版-局部打印/使用插件vue-print-nb打印，打印样式设置
一.自定义模版打印功能: <template><div v-if="printVisible"><div id="printBox" ...
html 实现excel表格分页打印,excel分页-用了这么多年Excel才知道，按下这个键，一张纸便可打印全部内容...
很多时候我们做完表格要把表格打印出来,可是它刚刚好就是比一页要多出那么一点点,没办法就要打印在第二张纸上,这样就造成了纸张浪费,都说没有买卖就没有杀害,为了保护我们的森林资源,我们还是尽可能要节省纸张 ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...

html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...

html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...相关推荐

最新文章

热门文章