VUE 在Element Table组件中实现打印功能

2,058 阅读1分钟

image.png

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      this.ids = selection.map((item) => item.postId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 打印按钮操作 */
    handlePrints(row) {
      let print = document.getElementById("print");
      let newDiv = document.createElement("div");
      if (this.multipleSelection.length) {
        //   批量打印
        this.multipleSelection.map((e, i) => {
          var newImg = document.createElement("img");
          newImg.src = e.url;
          newDiv.append(newImg);
        });
      } else {
        //   单独打印
        var newImg = document.createElement("img");
        newImg.src = row.url;
        newDiv.append(newImg);
      }
 
      let newContent = newDiv;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent.innerHTML;
      document.getElementsByTagName("body")[0].style.zoom = 0.92;
      setTimeout(() => {
        window.print();
        window.location.reload();
        //将原有页面还原到页面
        document.body.innerHTML = oldContent;
      }, 300);
    },