使用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># jsthis.$print(this.$refs.print) // 实际调用打印方法
2 element-admin 打印左侧大片空白问题处理
print.js 实际打印时，会生成一个iframe, iframe中的内容就是打印预览里的内容。由于左侧菜单栏的存在，实际打印内容左侧有大片空白解决方案：使用css，将左侧空白去除# 详见print.js源码第84行(-11-25日下载)，# 获取iframe中的内容let outerHTML = this.wrapperRefDom(this.dom).outerHTML# 将class替换，增加classouterHTML = 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;}}
友情链接 辅导机构管理系统-全优学堂 .
