Vue+Element 局部表格打印

一开始使用了print.js、Jquery.print.min.js、printArea等插件，但是使用这些插件的过程中出现了表格显示不全，样式丢失等问题。网上的办法都没有根本的解决我的问题。之后我决定通过window.print 这种方式，将需要打印的表格写入到一个新的页面中来进行打印。

 //获取打印的页面内容var print= document.getElementById('print');var newContent = print.innerHTML;var oldContent = document.body.innerHTML;document.body.innerHTML = newContent;document.getElementsByTagName('body')[0].style.zoom=0.92;window.print();window.location.reload();//将原有页面还原到页面document.body.innerHTML = oldContent;return false;

在使用插件和window这种方式打印的时候，还会出现表头偏移的问题。
写入到新页面中，打印出来的效果如下：
通过 @page 对打印的纸张进行设置，比如：

      @page{size: A4 landscape; /*portrait： 纵向打印,  landscape: 横向*/}

通过 @media print 对表格的样式进行修改：

      @media print {.el-table thead.is-group th {text-align: center}tbody {text-align: center;border: 1px solid #000;}th {border: 1px solid #000;}td {border: 1px solid #000;}}

出来的效果是这样：
自己手写给表格加上了边框线，但是显示不全的问题还是没有解决。

      document.getElementsByTagName('body')[0].style.zoom=0.78;

加上这行代码可以实现缩放，但是发现在不同屏幕大小的电脑上，打印的表格会出现不同偏移，单纯的通过zoom来设置并不太好。

在@media print 中添加

        table,tbody,thead {width: 100% !important;}colgroup {position: absolute;width: 100% !important;}

表格显示不全是宽度的问题，给了表格一个百分比宽度，解决了表格显示不全的问题，而且也没有出现表头偏移的问题。在不同的分辨率的电脑上也可以适应，打印出来的效果也比较好。效果如下：
本人小白一个，自己搞了好多天打印功能，网上的大部分插件，办法都试了个遍，都没有很好的解决。目前的办法也不知道是否完全适用，写的不好多见谅！

Vue+Element 表格打印相关推荐

vue element 表格错位
vue element 表格发生错位对不齐的问题在做vue element 表格的时候,页面展示上发现列表对不齐 <style scoped> /deep/ .el-table th.g ...
vue element表格某一列内容过多，超出省略号显示
vue element表格某一列内容过多,超出省略号显示 iview表格某一列内容过多,超出省略号显示
VUE+ELEMENT:表格渲染导致的异常:You may have an infinite update loop in a component render function
场景: 做一个全文检索,检索到的记录显示到el-table表中,这本是一个简单的问题.后面要对检索的Key在记录中做高亮显示,遇到了这个异常. 百度一下,很吓人.可能有无限更新循环,这怎么行,听着这得 ...
vue element 表格使用fixed固定列后切换菜单时错位问题
开发时由于列表数据项过多需要固定操作列,于是在操作列上加了fixed="right". 一开始没什么问题,但是在切换菜单时出现了错位现象后来找到问题,由于vue element- ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
vue + element 表格数据导出为excel表格
由于业务内容的需要,我们有时候需要将表格中的数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击图中导出按钮时 ...
vue+element小票打印、58小票打印机
1.组件webview <template><div class="page"><el-button @click="webviewMess ...
vue+element表格的左右布局及动态添加行
一般我们实现表格,直接使用element中的table组件,现在有个原型图是,类似表头左边,本来在纠结要写元生的表格了,最后突然想到把它当成form表单,直接样式实现表格效果效果如图: 我这里还有一 ...
vue element 表格增加删除修改数据
这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改效果如下: 表格的table: <el-table :data="tableData" st ...
vue element表格图片点击放大
插件网址 https://mirari.cc/v-viewer/ 操作步骤 1.npm install v-viewer --save 2. import Vue from 'vue'; import ...

Vue+Element 表格打印

Vue+Element 局部表格打印

Vue+Element 表格打印相关推荐

最新文章

热门文章