vue分页打印指定内容

再更新一种浏览器指定内容打印，^_^ ，需要分页打印的话，建议方法2看到最后。方法一没试，不知道能不能行。理论应该是可以的^_^。在此记录一下我的方案

——————————————————分割线————————————————————
21-08-16更新：指定打印图片。图片可以渲染到页面上，但是打印预览的时候就不显示图片了。
如果图片是引用的是http或者https的链接，可能会出现上面的问题，因为图片加载是需要时间的，这时候给加个定时器就好啦。

——————————————————分割线————————————————————

方法1: ctrl+p直接打印

思路：浏览器自带的有打印功能，如果此时直接ctrl+P打印的话，打印的是此时浏览器页面上所展示的全部内容。打印指定内容跟这个原理一样，就是把你要打印的内容替换当前页面的内容。

代码如下：

<template>
  <div class="mainNoPadBox">
        <p class="formTableTitle">这是网页的内容</p>
        <!-- 要打印的内容 -->
        <div id="printForm" style="display:none;">
          <p class="formTableTitle">要打印的内容标题</p>
          <p class="formTableTitle">要打印的内容标题</p>
          <p class="formTableTitle">要打印的内容标题</p>
          <p class="formTableTitle">要打印的内容标题</p>
          <p class="formTableTitle">要打印的内容标题</p>
          <p class="formTableTitle">要打印的内容标题</p>
          <p class="formTableTitle">要打印的内容标题</p>
        </div>
  </div>
</template>

<script>
export default {
	methods: {
		/ 打印
    	printFormData() {
      		var bdhtml = window.document.body.children[0].children[0].children[0];//获取当前页的html代码（这里根据你自己检查元素时页面的结构去调整）
      		var printHtml = window.document.getElementById('printForm') // 获取要打印的代码
      		window.document.body.children[0].children[0].children[0].children[0].style.display = 'none'
      		window.document.body.children[0].children[0].children[0].children[1].style.display = 'none'
	      	printHtml.style.display = 'block'
    	  	printHtml.classList.add('printForm')
      		window.document.body.children[0].children[0].children[0].appendChild(printHtml)
	      	window.print();//打印当前窗口页面内容
      		window.document.body.children[0].children[0].children[0].children[0].style.display = 'block'
      		window.document.body.children[0].children[0].children[0].children[1].style.display = 'block'
	        // window.document.body.innerHTML = bdhtml;//还原页面
		    location.reload(); //重新刷新当前窗口, 点击事件在渲染页面之外，不刷新页面第二次打印事件会失效
	    },
	}
}
</script>

注意：这个方法有个不算弊端的弊端^_^，就是你在ctrl+p打印的时候，当前的页面会变成你要打印的内容。打印完成需要重新刷新页面

方法2: 按钮触发打印

点击打印会在一个新的窗口打印指定内容，取消或者打印完成关闭窗口。优点：不用刷新页面，打印时什么样，打印完成还是什么样，不会对当前页面的内容有任何的修改。
示例：

我的实现代码：

<template>
  <div class="dialogBox">
    <p>通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。</p>
    <el-button type="primary" @click="visible = true;">点我弹框</el-button>
    
	<!-- 这是要打印的内容，我这里封装成了一个UI组件。id一定要加上，后面要用到的 根据需求，需要展示在页面上的话用 v-show 控制 -->
    <page403 id="review-print-box" v-show="false"></page403>

    <el-dialog
        title="提示"
        :visible.sync="visible"
        width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="setPrint">打印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import page403 from './403' // 引入要打印的组件
export default {
  components: {page403},
  data() {
    return {
      visible: false
    }
  },
  methods: {
    setPrint() {
      var w = window.open(); // 1 避免有些浏览器把window.open()当作垃圾广告给拦截
      var html = document.getElementById("review-print-box").innerHTML;
      // var w = window.open(location.href); // 注意：这种写法有些浏览器会直接当作垃圾广告拦截，不会打开新的窗口
      let url = location.href // 2 避免有些浏览器把window.open()当作垃圾广告给拦截
      w.location.href = url // 3 避免有些浏览器把window.open()当作垃圾广告给拦截
      var style = document.createElement("style");
      style.type = "text/css";

	  // 要打印内容的样式，注意不要换行
      style.innerText = `.error-page {display: flex;justify-content:center;align-items: center;flex-direction: column;width: 100%;height: 100%;box-sizing: border-box;} .error-code {line-height: 1;font-size: 250px;font-weight: bolder;color: #f02d2d;} .error-code span {color: #00a854;} .error-desc {font-size: 30px;color: #777;} .error-handle {display: flex; justify-content: center;align-item: center;margin-top: 30px;padding-bottom: 200px;} .error-btn {margin-left: 100px;} .backHome, .backPrePage {width: 120px;height: 45px;line-height: 45px;text-align: center;border-radius: 8px;font-size: 16px;color: #FFFFFF;background-color: #409EFF;font-family: Arial-BoldMT, Arial;}`;

      w.document.getElementsByTagName("head").item(0).appendChild(style);
      w.document.body.innerHTML = html;
      w.document.close();
      w.print();
      w.close();
    }
  }
}
</script>

403页面html部分，script和style部分要不要都行（注：此页面的style在打印时不会生效，写样式的时候看看就行了）

<template>
  <div>
    <div class="error-page">
      <div class="error-code">4<span>0</span>3</div>
      <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
      <div class="error-handle">
        <router-link to="/orderManage">
          <p class="backHome">返回首页</p>
        </router-link>
        <p class="backPrePage error-btn">返回上一页</p>
      </div>
    </div>
  </div>

</template>

注： 需要分页打印的话，css中有两个属性：page-break-before和page-break-after
值：
    auto：       假如需要在对象之后插入页分割符
always：   始终在对象之后插入页分割符
   avoid：     避免在对象后面插入页分割符
       left：         在对象后面插入页分割符直到它到达一个空白的左页边
     right：       在对象后面插入页分割符直到它到达一个空白的右页边

403页面：

<template>
  <div>
    <div>11111111</div>
    <div style="page-break-before:always">2222222</div>
    <div style="page-break-after:always">3333333</div>
    <div>4444444This is the fourth div.</div>
    <div style="page-break-before:right">5555555</div>
    <div style="page-break-after:right">66666666</div>
    <div>7777777</div>
  </div>

</template>

分页示例：

OK，更新完成。如有误，欢迎评论区指正。 [抱拳]