使用vue element-ui 打印组件

element-admin 打印，正确使用方式

1. 组件选用 print.js

组件js如下 github print.js 链接 .

# 使用方式
# 存入项目plugins文件夹中(没有可以新建)，在公用js中 引用 print.js
import Print from '@/plugins/print'
Vue.use(Print)

1.1 打印

<template>
<div ref="print">打印内容<div class="no-print">不要打印我</div>
</div>
</template>
# js
this.$print(this.$refs.print) // 实际调用打印方法

2 element-admin 打印左侧大片空白问题处理

print.js 实际打印时，会生成一个iframe, iframe中的内容就是打印预览里的内容。
由于左侧菜单栏的存在，实际打印内容左侧有大片空白
解决方案：使用css，将左侧空白去除

# 详见print.js源码第84行(2020-11-25日下载)，
# 获取iframe中的内容
let outerHTML = this.wrapperRefDom(this.dom).outerHTML
# 将class替换，增加class
outerHTML = outerHTML.replace("main-container", "main-container print")
# 增加css，去除左侧margin
.main-container.print {margin-left: 0;
}

3 打印内容超出预览，使用zoom解决或使用打印预览中的缩放

# 使用zoom解决
# 由于顶层dev增加了 .print class,实际打印的class 可增加zoom缩放
.main-container.print {.print-container {zoom: 0.7;}
}

友情链接辅导机构管理系统-全优学堂 .

使用vue element-ui 打印组件相关推荐

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
vue element ui 子组件向父组件传值
写项目碰到弹窗(子组件)向他的父组件传值,具体如下: 父组件: <Zjhinfo v-if="ZjhinfoVisible" ref="Zjhinfo" ...
VUE Element UI 父组件调用子组件方法变量，子组件使用父组件变量
一.父组件调用子组件的方法步骤拆解: (1)父组件:1.渲染调用子组件 2.导入子组件 3.声明子组件变量 4.调用子组件 (2)子组件:1.实现子组件自己的渲染.数据处理功能 2.使用父组件的变量 ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...

使用vue element-ui 打印组件

使用vue element-ui 打印组件

element-admin 打印，正确使用方式

1. 组件选用 print.js

1.1 打印

2 element-admin 打印左侧大片空白问题处理

3 打印内容超出预览，使用zoom解决或使用打印预览中的缩放

使用vue element-ui 打印组件相关推荐

最新文章

热门文章

使用vue element-ui 打印组件

使用vue element-ui 打印组件

element-admin 打印，正确使用方式

1. 组件选用 print.js

1.1 打印

2 element-admin 打印左侧大片空白问题处理

3 打印内容超出预览，使用zoom解决 或 使用打印预览中的缩放

使用vue element-ui 打印组件相关推荐

最新文章

热门文章

3 打印内容超出预览，使用zoom解决或使用打印预览中的缩放