vue之引入JS文件打印和Print.js打印以及分页打印

一、引入JS文件的打印

1、main.js文件中引入：
import Print from "./utils/print"
Vue.use(Print) // 注册

2、vue组件中使用：
<template>
<section ref="print">
    <div>打印内容</div>
    <div class="no-print">不要打印我</div>
</section>
</template>
this.$print(this.$refs.print) // 使用

3、注意事项：
需使用ref获取dom节点，若直接通过id或class获取，
则webpack打包部署后打印内容为空 **指定不打印区域** 

方法一. 添加no-print样式类
<div class="no-print">不要打印我</div>

方法二. 自定义类名
<div class="do-not-print-me">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me'})

4、附件参考地址：https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js

二、插件Print.js的打印（网址https://printjs.crabbly.com/）

1、安装插件
 npm install print-js --save
2、引入
 import print from "print-js"
3、使用
  1) pdf的打印
     <button type="button" onclick="printJS('docs/printjs.pdf')">
        Print PDF
     </button>
  2)base64
   
  <button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
  </button>
  
  3)html的打印
   <form method="post" action="#" id="printJS-form">
     ...
   </form>
   <button type="button" onclick="printJS('printJS-form', 'html')">
     Print Form
   </button>
   
   4)图片的打印
   <img src="images/print-01.jpg" />
   printJS('images/print-01-highres.jpg', 'image')
   
   打印多张图片
    printJS({
      printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
      type: 'image',
      header: 'Multiple Images',
      imageStyle: 'width:50%;margin-bottom:20px;'
     })

   5)打印json
    someJSONdata = [
        {
           name: 'John Doe',
           email: '[e-mail]',
           phone: '111-111-1111'
        },
        {
           name: 'Barry Allen',
           email: '[e-mail]',
           phone: '222-222-2222'
        },
        {
           name: 'Cool Dude',
           email: '[e-mail]',
           phone: '333-333-3333'
        }
     ]
    <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
        Print JSON Data
     </button>

分析：
经过多次实战演练：
如果要打印的样式比较复杂，并且有字体图标等，建议选择第一种；
如果打印表格数据，比如element表格，还可以按需勾选进行打印，选择第二种打印方式比较好。


再分享一个强制分页打印，每页只打印固定的内容：
只需要在要分页打印的末尾加上：
<div style="page-break-after:always"></div>
即可
代码如下：
   <div id="printTable"
                   v-for="(arr, i) in saveListArray"
                   :key="i"
                   style="position: relative; background-color:rgb(236,230,232);margin-top:5px;"
                   :class="printWay == 3 ? 'printTableActive' : ''"
                   :style="{
                    width: containerWidth + 'mm',
                    height: containerHeight + 'mm',
                   }">
                <el-container v-for="(item, index) in arr"
                              :key="index">
                  <div id="printColor"
                       v-bind:style="{
                    width: Number(item.GoodInvoiceDetailWidth) + 'mm',
                    height: item.GoodInvoiceDetailHeight + 'mm',
                    'line-height': item.GoodInvoiceDetailHeight + 'mm',
                    left: Number(item.GoodInvoiceDetailCoordinateX) + Number(x) + 'mm',
                    top: Number(item.GoodInvoiceDetailCoordinateY) + Number(y) + 'mm',
                    color: item.GoodInvoiceDetailColour + '',
                    'font-size': item.GoodInvoiceDetailSize + 'mm',
                    'font-family': item.GoodInvoiceDetailFont + '',
                    'text-align': item.GoodInvoiceDetailPosition + '',
                    'border-top': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderTcolor,
                    'border-bottom': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderBcolor,
                    'border-left': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderLcolor,
                    'border-right': item.GoodFramSize*0.1+0.1 + 'mm' + item.GoodFramSolidlineIf + item.borderRcolor,
                    overflow: item.overflow,
                    }"
                       style=" display: inline-block;
                    text-align:left;
                    position: absolute;
                    cursor: move;">
                    <div v-if="item.GraphContent"><img :src="item.GraphContent"
                           style="width:100%;height:100%;margin-top:4px;"></div>
                    <div v-else
                         style="margin-right:3px;margin-left:3px;">{{ item.GoodInvoiceDetailName }}</div>
                  </div>
                </el-container>
                <div style="page-break-after:always"></div>
              </div>

下面展示两种图片：（一张没有加分页的，和加了分页的区别）