VUE 在Element Table组件中实现打印

灰太狼 2022-11-20 10:56 630阅读 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 条评论，630人围观）

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

相关阅读

相关基于element-plus2.5.10 table组件实现分类table

实现效果 ![在这里插入图片描述][b096cb00f4524e1e880c77b22d8b0b7d.png] <template> <div cl

谁践踏了优雅/ 2024年04月01日 11:50/ 0 赞/ 58 阅读

相关在Vue项目中使用Element组件

0 写在前面使用组件可以快速进行开发，使用Element UI轻松制作出网页，为前端开发人员大大减轻了代码负担，即使是后端程序员也可以快速上手做出比较精美的界面。

绝地灬酷狼/ 2024年03月26日 15:47/ 0 赞/ 114 阅读

相关【Vue基础】element组件

一、需求描述有按钮、表格、页码、嵌套的表格，选择页码或每页记录数时会出现监听效果，点击嵌套的表格会弹出表格内容。二、代码分享 ElementView.vue文件中代码

谁借莪１个温暖的怀抱￠/ 2023年10月11日 21:38/ 0 赞/ 37 阅读

相关 element ui切换table组件式

效果如下： ![20200717162448865.png][] 我用下面这个代码是因为，我这边的tab切换是每个不同的页面的哦，感觉这样写方便点 <e

╰+攻爆jí腚メ/ 2023年02月27日 12:21/ 0 赞/ 59 阅读

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

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

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

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

1. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nh

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

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

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

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

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

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

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

相关 element table 组件内容换行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEy

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

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

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

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