VUE 在Element Table组件中实现打印

灰太狼 2022-11-20 10:56 607阅读 0赞

1.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

// 多选框选中数据
        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);
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20221120/fd7e507ce99b4976bca98f3270ff6d47.png

发表评论取消回复

表情：

评论列表（有 0 条评论，607人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE-Element组件（七）Table表格

[Element - The world's most popular Vue UI framework][Element - The world_s most popular

谁践踏了优雅/ 2022年12月15日 03:39/ 0 赞/ 353 阅读

相关 VUE 在Element Table组件中实现打印

1. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nh

灰太狼/ 2022年11月20日 10:56/ 0 赞/ 608 阅读

相关【vue系列】在router.js中使用ELEMENT组件

我目前项目基于element-ui+vue+router架构的平台，我会每天总结一点遇到的坑和解决方案，以备后续查阅解决。就如标题所示：在router.js里用elme

秒速五厘米/ 2022年11月15日 11:41/ 0 赞/ 230 阅读

相关 vue element table

`el-table`绑定数据框数据 `el-table-column`绑定key `template slot-socpe`用来接收该行的数据,用来定制化一些操作

r囧r小猫/ 2022年10月29日 15:35/ 0 赞/ 181 阅读

相关 vue+element UI的 table组件实现日历

有现成的日历插件但是不符合需求，所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分：此部分为计算的当月的日期且包含是否可选，是否节假日等等可

太过爱你忘了你带给我的痛/ 2022年10月23日 12:59/ 0 赞/ 852 阅读

相关 element table 组件内容换行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEy

分手后的思念是犯贱/ 2022年10月17日 04:07/ 0 赞/ 410 阅读

相关 element ui 中的popover组件在table列表中使用的bug

bug场景： ![70][] 在列表数据中使用，点击对应的查看按钮，每一页的最后一个无法正确弹出这个红色框，别的都是正常的。查看代码： <el

矫情吗；*/ 2022年05月26日 07:27/ 0 赞/ 269 阅读

相关 Vue中使用 Element 组件实现分页效果

[Vue官网（点击跳转）][Vue] [Element官网（点击跳转）][Element] <!DOCTYPE html> <html lang="en"

左手的ㄟ右手/ 2022年04月22日 12:24/ 0 赞/ 281 阅读

相关 Vue项目实现vue element组件走马灯效果

我的qq 2038373094 效果如下（由于不支持动态图，我就截图了） ![watermark_type_ZmFuZ3poZW5naGVpdGk_shado

男娘i/ 2022年02月03日 15:51/ 0 赞/ 617 阅读

相关在VUE中实现打印

1.安装 npm install vue-print-nb --save 2.在mian.js中引入 import Print from 'vue-pri

旧城等待，/ 2022年01月06日 14:09/ 0 赞/ 296 阅读