div.querySelector(".hidden-columns").remove(); // 第一个表格的内容提取出来后已经没用了 删掉 div.querySelector(".el-table__header-wrapper").remove(); // 将第一个表格的内容插入到第二个表格 let newHTML = ""; for (let i = 0, len = ThsTextArry.length; i < len; i++) { newH...
代码语言:javascript 复制 printJS({printable:id,// DOM idtype:'html',scanStyles:false,}) element-ui 表格打印 element-ui 的表格,表面上看起来是一个表格,实际上是由两个表格组成的。 表头为一个表格,表体又是个表格,这就导致了一个问题:打印的时候表体和表头错位。 另外,在表格出现滚动条的时候,也会...
一、因为表格数据过多,之前加了表格滚动条,但是打印出来 会把表格上的滚动条也打印出来,所以这里改成了 给弹框加滚动条,去掉表格中的滚动条 二、表格的列缺失(element-ui table组件) 2.1 原因: table-layout: fixed导致的,出现部分列没有被打印 让表table布局更加符合预期,普通使用table时,其table-layout 默认...
element-ui表格打印 打印需要⽤到的组件为 普通表格打印 ⼀般的表格打印直接仿照组件提供的例⼦就可以了。printJS({ printable: id, // DOM id type: 'html',scanStyles: false,})element-ui 表格打印 element-ui 的表格，表⾯上看起来是⼀个表格，实际上是由两个表格组成的。表头为⼀个表格，表体...
element-ui 表格打印 element-ui 的表格,表面上看起来是一个表格,实际上是由两个表格组成的。 表头为一个表格,表体又是个表格,这就导致了一个问题:打印的时候表体和表头错位。 另外,在表格出现滚动条的时候,也会造成错位。 解决方案 我的思路是将两个表格合成一个表格,print-js组件打印的时候,实际上是把 id...
到这里,点击打印就会出来最开始的那个错位表格了 下面就是具体解决错位问题的代码啦。解决方案是获取到元素,将上面table的thead内容插入到下面的table的tbody前面 thead里面有多一个 th,要先把它删掉 5. 修改pint方法 在pint.js文件里面找到pint方法找到下面这句代码 ...
打印需要用到的组件为print-js 普通表格打印 一般的表格打印直接仿照组件提供的例子就可以了。 printJS({printable: id,// DOM idtype:'html',scanStyles:false, }) element-ui 表格打印 element-ui 的表格,表面上看起来是一个表格,实际上是由两个表格组成的。
在这个示例中,我们使用了Element UI的按钮和表格组件来创建一个更复杂的打印模板。通过这种方式,可以确保打印内容与应用中的其他部分保持一致。 四、优化打印样式和布局 为了确保打印输出的质量,需要对打印样式和布局进行优化。可以使用CSS媒体查询来定义打印特定的样式: ...
定义一个按钮,用来点击执行printTest模版的打印操作 代码语言:javascript 复制 <el-button type="text"icon="el-icon-printer"class="red"v-print="'#printTest'"></el-button> 目前这个打印只是简单的打印功能,只是打印了一行标题,可以插入表格或者根据需求的不同画不一样的前台样式打印出来,后台只需要传数据前...
在需要打印的页面对应文件中引入print-js importprintJSfrom'print-js' AI代码助手复制代码 实现打印功能 需要打印的内容 需要把表格打印出来,在表格外套一个div,并给一个id值。 <el-tablesize="mini" :key="num" id="mytable" :header-cell-:span-method="arraySpanMethod...