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

您所在的位置：网站首页 › 打印时保留表头 › vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）

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

2023-07-28 00:40| 来源: 网络整理| 查看: 265

写在前面：注意打印表格时，若需要多页打印，则尽量使用原生table元素实现，这样在分页时每页顶部会带有表头，用户体验比较好一、引用插件（在 main.js 中全局引入！！注意，需要修改源码，所以尽量下载依赖到本地）

插件地址：https://github.com/xyl66/vuePlugs_printjs

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 += "" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}"; /*@@备注！！添加此行可以多页自动分页*/ str += "html,body,div{height: auto!important;font-size:14px}"; return str; } 二、调用方法打印

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

printContent() { this.$print(this.$refs['print-content']) }, 三、设置打印样式 @media print { // 这里写自己需要的样式 }

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

【本文地址】

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

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

今日新闻

推荐新闻