Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚_params.printable.charat is not a function

先放几个参考链接 感谢！

Vue使用PrintJS实现页面打印功能_vue print.js 设置打印pdf的大小-CSDN博客

前台导出pdf经验汇总 （html2canvas.js和浏览器自带的打印功能-print.js）以及后台一些导出pdf的方法_iqc后台管理系统怎么做到导出pdf-CSDN博客 vue 中使用print.js导出pdf_printjs导出文件命名-CSDN博客

解决使用printJS打印PDF时echarts图表无法打印的问题_print-js打印pdf出现params.printable.charat is not a fu-CSDN博客 printJs库的使用心得 printJs配置 echart table超出_print js 布局设置-CSDN博客

https://www.5axxw.com/questions/simple/fwb2pk

css @page规则控制打印设置选项-CSDN博客    ↓

打印的时候设置第一张的样式：@page:first{ margin:0mm 10mm;}

最棘手的问题放最前面：

VUE实现HTML页面局部内容的打印（print.js），出现多打印一个空白页的问题

感谢上面的老哥提供思路，

就是打印的时候会多出空白页

所以，出现空白页，注意两点：

1、body的margin属性改成0；

2、找到height属性为100%的尝试修改成其他值或者删除该属性。 

假设元素设置了 height:100%，那么就应该去检查其属性 的margin和padding

貌似padding 可以，多余的margin值会让打印多出 空白页，还有就是 position: absolute;top:;bottom 属性也会影响 出现空白页

 高度100%的问题。页面打印部分有标签高度设置了100%，但是视觉上没有超出，打印时，莫名的就影响了，多出一个空白页。

打印时设置页眉页脚：↓ (printJs 系统自带)

//执行打印
      const style = '@page {margin:0 10mm};' //可选-打印时去掉眉页眉尾
      printJS({
        printable: 'printMe', // 标签元素id
        type: 'html',
        header: '',
        style:'@page {margin:0 10mm};',//可选-打印时去掉眉页眉尾
      })
 
3. **header**: 设置打印时的页头，默认为空。
 
4. **footer**: 设置打印时的页脚，默认为空。
 
print.js 里面↓
 
@page { margin: ${this.options.margin || "4mm"}; //去掉显示页眉页脚-加上没有眉页眉尾

由于系统自带的页眉、页脚太丑陋 内容多 无法满足项目需求，下面在打印的时候自定义加页脚 仅限参考 

在打印的时候 编写你需要打印时候的页面样式：Print.js 里面写才能生效

unitChange.js";//最下面的js文件里面有mm与px的相互转换 ↓ 

感谢老哥提供思路： 

【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印_printjs vue 自定义页脚-CSDN博客

自定义页脚: 

//第二种手动写死 定位位置 推荐
 
 Print("#pdfDom", {
          printable: "pdfDom", // 标签元素id
          type: "html", // 打印类型
})
 
<!-- HTML -->
      <div
        id="print-footer"
        v-for="(item, i) in a4counts"
        :key="i"
        :class="['print-footer',`fpage`+(i+1)]"
      >
        第 <span class="page-number">{
  { item }}</span> 页，共{
  { a4counts }}
        <span class="total-pages"></span> 页
      </div>
 
 
@media print {
  *{margin:0;padding:0}
  .print-footer {
    top: 315mm;
    width: 100%;
    text-align: center;
    position: absolute;
  }
  // 公式：305*i+10
  .fpage1 {
    top: 315mm;
    width: 100%;
    text-align: center;
    position: absolute;
  }
 
  .fpage2 {
    top: 620mm;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .fpage3 {
    top: 925mm;
    width: 100%;
    text-align: center;
    position: absolute;
    
  }
  .fpage4 {
    top: 1230mm;
    width: 100%;
    text-align: center;
    position: absolute;
  }
}
 
 
<!-- 最外层需要打印的div ref="pdfDom" -->
<div
      class="img-list-contain"
      id="pdfDom"
      ref="pdfDom"
      style="position: relative"
    >
    <!-- 页脚页数 先写好页脚盒子 因为无法判断 打印的时候是多少张A4纸 需要通过高度动态计算-->
      <div
        id="pages"
        ref="pages"
        v-show="a4counts > 0"
        style="position: absolute; right: -2%; top: 10px"
      ></div>
</div>
import unitChange from "@/utils/unitChange.js";//里面有mm与px的相互转换
 data() {
    return {
      a4counts: "",
    }
}
      //手动动态加页码
      const a4mmHeight = 297; //一张a4 297mm
      let a4pxHeight = Math.ceil(unitChange.mm2px(a4mmHeight)); //mm转px
      // const a4pxHeight = 1124;//px a4高度是1124像素 不转的话直接写固定值
      let pdfDombox = this.$refs.pdfDom;
      let pages1 = this.$refs.pages;
      let pdfDomheight2 = pdfDombox.offsetHeight - 90; //-90 因为有三个空白div
      var a4count = Math.floor(pdfDomheight2 / a4pxHeight) + 1;
      _this.a4counts = a4count;
      for (let i = 0; i < a4count; i++) {
        let dom = document.createElement("div");
        //第一页 倒数第一、第二固定
        var topValue;
        switch (i) {
          case 0: