在这里感谢我是一名好程序https://www.cnblogs.com/wangqi2019/p/11850581.html
有可能太多人的能力过人,但同样遇到问题始终不愿担负起责任
注意:打印的样式遵循页面的CSS样式;
具体打印设置可直接在调用的打印机上进行格式的设置
如果打印的内容有图片(即页面存在<img>标签),需将图片格式转换为 base64 或者 引用线上的图片地址
转base64网址:https://tool.oschina.net/encrypt?type=4
Vue实现打印功能( 此篇出自于'我是一名好程序员',感谢大哥 )
安装打印相关依赖
cnpm install vue-print-nb --save
安装后,在main.js文件中引入
import Print from 'vue-print-nb' Vue.use(Print); //全局注册
在页面中直接进行调用
<template> <div> <div id="printTest" style=" 100%;text-align:center"> <p style="font-size:40px">哈哈哈</p> <el-table :data="tableData" style=" 60%;margin-left:100px"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> <button v-print="'#printTest'">打印</button> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" } ] }; } }; </script>