Vue实现多页打印（ print.js）

最新推荐文章于 2025-10-29 13:43:13 发布

原创

最新推荐文章于 2025-10-29 13:43:13 发布 · 5.9k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

该博客围绕VUE项目中表格数据打印需求展开。初始用vue - print - nb实现打印，只能打当前页，超一页预览不显示。最终采用print.js实现多页打印，介绍了将代码保存为print.js文件、在main.js引入使用及在.vue文件使用的步骤。

项目背景

需求：VUE项目中，需要打印表格数据，超过一页（`多页打印`）

初始方案：使用vue-print-nb实现打印，无法实现多页打印，只能打印当前页，且数据超过一页后打印预览未显示。

最终方案：使用print.js实现多页打印

一、将下面代码保存为print.js文件放到src/utils文件目录下

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
   
   
    if (!(this instanceof Print)) return new Print(dom, options);
   
    this.options = this.extend({
   
   
      'noPrint': '.no-print'
    }, options);
   
    if ((typeof dom) === "string") {
   
   
      this.dom = document.querySelector(dom);
    } else {
   
   
      this.isDOM(dom)
      this.dom = this.isDOM(dom) ? dom : dom.$el;
    }
   
    this.init();
  };
  Print.prototype = {
   
   
    init: function () {
   
   
      var content = this.getStyle() + this.getHtml();
      this.writeIframe(content);
    },
    extend: function (obj, obj2) {
   
   
      for (var k in obj2) {
   
   
        obj[k] = obj2[k];
      }
      return obj;
    },
   
    getStyle