js打印局部页面

效果说明

原页面：

想要效果：不打印顶部和侧边导航，只打印主体部分（包含echarts图表和element组件的表格）

打印整个页面

很简单，不多说：

    window.print();
复制代码

---

打印局部页面

因为 window.print() 只能打印整张页面，所以想要实现打印局部页面的效果，必须要在打印的时候，页面中只显示你想打印的那部分内容。 也就是说，要去掉其他内容。

有下面两种方法：

1 打印的时候，用css隐藏其他内容 （推荐）

使用 @media print。@media print 中写的样式，只在打印的时候生效。
使用 @page设置打印纸张的大小。
纸张的大小可以设置为像素！！！把纸张的宽度和打印部分的宽度设置为一样的，就不会出现页面过大，打印时一张纸放不开被横向截断的问题。也不会出现页面过小，打印时边上有很大空白的问题了！
（纸张的像素大小和纸张真实大小的转换是自动处理的。无论打印时选择什么尺寸的纸张，都不会出现问题！）

    @media print{
        需要隐藏的内容{
            display:none;
        }
        需要打印的部分{
            width:1200px!important;
        }
    }
    /*纸张设置为宽1200px 高800px*/
    @page{
        size:1200px 800px;
    }
复制代码

如果页面比较简单，推荐使用这种方法，很方便！

2 打印的时候，用js去掉其他内容 （不推荐）

在网上搜索打印局部页面的方法时，很多文章都采用了这种方法。但是我自己用过后觉得不好用。这里只简单说一下思路：

• 1 取出想要打印的部分的html内容，记为 html1
• 2 把body的innerHTML替换为 html1的内容

这样页面中就只剩下想要的部分了。

为什么说这种方法不好用呢？因为：

• 1 可能会有一些有用的内容，都被一锅端去掉了。比如说 相关的style标签。
• 2 层级结构没有了，可能会影响css样式。比如说，你要打印的部分是 .content ，他的css是这样写的：

      #container .rightPart .content{
          background:red;
      }
  复制代码

  那么，粗暴替换html后，你的.content外层没有#container 和 .rightPart了，样式自然也就不生效了。

（当然，以上提出的两个问题，在写HTML结构和css时如果特别注意，是可以避免的。不过从我个人来讲，不会为了一个打印功能而限制html结构或者重写css。）

---

@media print简单实例

页面结构：

<div id="app">
    <!-- 顶部栏 -->
    <section id="topbar"></section>
    <section id="main_container">
    	<!-- 侧边栏 -->
        <section id="sidebar_wrap"></section>
        <!-- 主要内容 -->
        <section id="content_wrap"></section>
    </section>
</div>
复制代码

css
隐藏顶部栏和侧边栏，将主体内容的宽度设置为和纸张的宽度一样

@page {
    width: 1200px 1800px;
}
@media print {
    #topbar {
        display: none;
    }
    #sidebar_wrap {
        display: none;
    }
    #content_wrap {
        width: 1200px !important;
        /*布局的时候，为了给侧边栏留位置，给主体内容加了margin-left，现在需要去掉。*/
        margin-left: 0 !important;
    }
}
复制代码

打印效果：

可以看到，打印的时候，竖直方向没有打印完全。这是因为主体内容是限高，内部出现滚动条。

要把局部滚动去掉，变成整个页面滚动：

@page {
    width: 1200px 1800px;
}
@media print {
    #topbar {
        display: none;
    }
    #sidebar_wrap {
        display: none;
    }
    #content_wrap {
        width: 1200px !important;
        /*因为之前布局的时候，为了给侧边栏留位置，给主体内容加了 200px 的 margin-left，现在需要去掉。*/
        margin-left: 0 !important;
    }
    /*去掉限高，变局部滚动为整个页面滚动*/
    #main_container{
        height:auto!important;
    }
}
复制代码

打印效果：

---

说明

以上的 @media print 方法适用于比较简单的页面情况。
如果页面中包含echarts图表、element组件的表格等，那么打印的时候就需要额外处理了。
（因为echarts图表的容器宽度变化时，需要手动resize。element中的表格组件的每一列的宽度也是用js计算出来的。而 window.print() 会阻塞js进程。所以这两种情况都无法仅仅用 @media print 简单处理）

具体方法在之后的文章说明

转载于:https://juejin.im/post/5c9c23b76fb9a070ad5054b0