vue项目中打印数据或表格(使用第三方依赖vue-printjs)
·
第三方依赖vue-printjs(下面示例打印的是Html类型,该插件可以指定不打印的部分)
资源包网址:GitHub - xyl66/vuePlugs_printjs: vue打印插件
1.安装vue-printjs
npm i vue-printjs -S
2.全局引入vue-printjs
//该文件为main.js
import Print from 'vue-printjs'
Vue.use(Print)
3.在需要打印表格或数据的组件中使用
<template>
<!-- 打印 -->
<el-button
size="mini"
class="el-icon-printer"
@click="printJson"
></el-button>
<!-- 要打印的表格部分,定义属性ref='table' -->
<el-table
:data="list"
border
row-key="name"
ref="table"
>
<!-- 序号 -->
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
height="24px"
></el-table-column>
<el-table-column
label="用户"
align="left"
width="120px"
class="addline"
>
</el-table-column>
<el-table-column
prop="Staff_Name"
label="姓名"
align="left"
width="80px"
show-overflow-tooltip
>
</el-table-column>
<!-- 不需要打印表格中的列部分,定义class-name="no-print"(在el-table-column标签中,定义class要用它的class-name属性) -->
<el-table-column label="操作" align="center" width="50px" class-name="no-print">
<template slot-scope="scope">
<el-button
@click="delateList(scope.row)"
class="el-icon-delete"
></el-button>
</template>
</el-table-column>
<el-table-column label="" align="center" width="" class-name="no-print"></el-table-column>
</el-table>
</template>
<script type="text/javascript">
export default {
data() {
return {
list : [],
};
},
methods: {
printJson() {
this.$print(this.$refs.table);
},
}
};
</script>
4.点击打印按钮,弹出打印预览界面,右边栏调整打印界面——打印。
*注意: 打印多页需要在vue-printJS代码中添加:
// 在print.js文件中添加
str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
*在main.js中找到引入的vue-printjs文件( Ctrl+鼠标单击 )打开print.js文件

*在红框位置添加一下代码
// 在print.js文件中添加
str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)