vue调用打印功能
第一步 安装打印插件npm install vue-print-nb --save第二步 在main.js中进行引入import Print from 'vue-print-nb'Vue.use(Print); //注册第三步 给需要打印的区域添加id,打印按钮为按钮添加 v-print 属性,属性的值就是’id名’<el-button type="primary" class="elbut
·
第一步 安装打印插件
npm install vue-print-nb --save
第二步 在main.js中进行引入
import Print from 'vue-print-nb'
Vue.use(Print); //注册
第三步 给需要打印的区域添加id,打印按钮为按钮添加 v-print 属性,属性的值就是’id名’
<el-button type="primary" class="elbutton" v-print="print"
>打印</el-button
>
<div class="symContainer" id="printArea">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
data() {
return {
print: {
id: "printArea", //打印的区域的id名
popTitle: "数据交互平台", // 打印配置页上方标题
extraHead: "", //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
extraCss: "",
},
}
}
//添加独立style标签
<style media="print" lang="scss">
@page {
size: auto;
}
@media print {
html {
zoom: 76%; //设置打印页面的缩放,大小
margin: 0 auto;
}
}
</style>
zoom: 76%; //设置打印页面的缩放,大小
更多推荐
已为社区贡献2条内容
所有评论(0)