使用vue element-ui 打印组件

使用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 打印左侧大片空白问题处理

1. print.js 实际打印时，会生成一个iframe, iframe中的内容就是打印预览里的内容。
2. 由于左侧菜单栏的存在，实际打印内容左侧有大片空白
3. 解决方案：使用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;
	}
}

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