vue项目中封装js打印功能

最新推荐文章于 2024-08-02 18:17:51 发布

weixin_43936839

最新推荐文章于 2024-08-02 18:17:51 发布

阅读量254

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43936839/article/details/113178324

版权

本文介绍了如何在Vue项目中封装并使用JavaScript打印功能。首先在utils文件夹下创建print.js，接着封装打印方法，然后在main.js中将该方法挂载到全局，最后在各个组件中调用实现打印功能。

摘要由CSDN通过智能技术生成

在utils文件夹中创建一个名为print.js的js文件

在这里插入图片描述

print.js方法封装

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: function () {
   
    var str = "",
      styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
   
      str += styles