Vue+Element 表格打印

最新推荐文章于 2024-08-02 18:16:47 发布

㊎㊍㊌㊋㊏

最新推荐文章于 2024-08-02 18:16:47 发布

阅读量1.2w

点赞数 11

分类专栏： vue zero 文章标签： element 局部打印表格打印

本文链接：https://blog.csdn.net/weixin_44368997/article/details/103140724

版权

vue zero 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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;
        }

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