element ui表格打印_element-ui 表格打印

打印需要用到的组件为 print-js

普通表格打印

一般的表格打印直接仿照组件提供的例子就可以了。

printJS({

printable: id, // DOM id

type: 'html',

scanStyles: false,

})

element-ui 表格打印

element-ui 的表格，表面上看起来是一个表格，实际上是由两个表格组成的。

表头为一个表格，表体又是个表格，这就导致了一个问题：打印的时候表体和表头错位。

另外，在表格出现滚动条的时候，也会造成错位。

解决方案

我的思路是将两个表格合成一个表格，print-js 组件打印的时候，实际上是把 id 对应的 DOM 里的内容提取出来打印。所以，在传入 id 之前，可以先把表头所在的表格内容提取出来，插入到第二个表格里，从而将两个表格合并，这时候打印就不会有错位的问题了。

function printHTML(id) {

const html = document.querySelector('#' + id).innerHTML

// 新建一个 DOM

const div = document.createElement('div')

const printDOMID = 'printDOMElement'

div.id = printDOMID

div.innerHTML = html

// 提取第一个表格的内容即表头

const ths = div.querySelectorAll('.el-table__header-wrapper th')

const ThsTextArry = []

for (let i = 0, len = ths.length; i < len; i++) {

if (ths[i].innerText !== '') ThsTextArry.push(ths[i].innerText)

}

// 删除多余的表头

div.querySelector('.hidden-columns').remove()

// 第一个表格的内容提取出来后已经没用了删掉

div.querySelector('.el-table__header-wrapper').remove()

// 将第一个表格的内容插入到第二个表格

let newHTML = '

for (let i = 0, len = ThsTextArry.length; i < len; i++) {

newHTML += '

' + ThsTextArry[i] + ''

}

newHTML += '

div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin', newHTML)

// 将新的 DIV 添加到页面打印后再删掉

document.querySelector('body').appendChild(div)

printJS({

printable: printDOMID,

type: 'html',

scanStyles: false,

style: 'table { border-collapse: collapse }' // 表格样式

})

div.remove()

}

element ui表格打印_element-ui 表格打印相关推荐

element ui表格打印_element ui实现前台打印功能
element ui实现前台打印功能简介在项目中经常会使用打印功能,这次我们来看一下element ui实现打印功能,后台采用springboot作为后台接口方法,后台抽数据就不用看了,大家都明白 ...
element table批量删除_element ui 批量删除
//这里做一个事件 checkbox发生改变时触发修改删除 data{ return { multipleSelection: [] //返回的是选中的列的数组集合这里接收用户选中的id 默认放 ...
element ui 穿梭框_element ui 的穿梭框的右边框在初始化怎么赋值上去
展开全部在表格初始化时,设32313133353236313431303231363533e78988e69d8331333433646465置selectable属性,回掉参数为(row,inde ...
element tree ui 全选_element UI tree 控件，点击父节点进行异步加载，异步加载的数据不能全选...
异步加载不能有多级数据,异步的只能一级级加载贴上我的代码 html :load="loadNode" node-key='id' lazy ref="tree" ...
element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
计算机如何分页打印,[计算机]Excel表格如何分页打印、自动分页、取消分页等技巧.doc...
[计算机]Excel表格如何分页打印.自动分页.取消分页等技巧.doc 上传人:max****ui 文档编号:13468786 上传时间:2019-01-18 格式:DOC 页数:5 大小:334.1 ...
excel表格怎么调整行高和列宽_表格太宽，怎么打印在一页上？这招超简单
私信回复关键词[2020],获取100+套高颜值图表模板! 本文作者:秋叶 Excel 讲师-小敏不知道是不是临近年终,大家经常需要做汇报的缘故,最近老遇到同学提问表格打印的问题. 五花八门的打印问 ...
Web打印连续的表格，自动根据行高分页
拿到这个需求,我已经蛋碎了一地,经过N天的攻克,终于是把它搞定了,只是不知道会不会在某种情况下出现BUG.表示我心虚没有敢做太多的测试.... ---------------------------- ...
怎么让打印出来表格的纸下面显示页数_4个使用频率较高的Excel打印技巧，办公室打印文件时常常会用到！...
想必大家在职场办公工作时候经常需要打印文件,经常因为自己不会打印还要求别人,一次二次人家还能接受,但是时间久了人家也不会乐意的!所以说靠人还不如靠自己, 下面在这里为大家整理了4个我们在打印文件时候经 ...
打印表格_Excel表格打印技巧，让你分分钟打印出完美表格！建议收藏！
平时在工作中经常需要帮忙打印一些文件,但有时候打印出来的东西却并不是我们想要的...... 打印出来为什么没有标题? 不可以自己设置打印区域吗? 怎么把内容打印到一页纸上? 等等...... 如果你遇 ...

element ui表格打印_element-ui 表格打印

element ui表格打印_element-ui 表格打印相关推荐

最新文章

热门文章