vue表格数据打印功能的实现

huxihua2006

已于 2023-03-02 17:05:14 修改

阅读量2.1k

点赞数

文章标签： vue.js 前端 javascript

于 2023-02-03 14:28:55 首次发布

原文链接：https://zhuanlan.zhihu.com/p/183952584?utm_source=wechat_session

版权

1.安装

npm install vue-print-nb --save
2.引入

// 安装好以后在main.js文件中引入
import Print from 'vue-print-nb'
Vue.use(Print);  //注册
3.使用

3.1直接使用id，不对最终打印的表格进行样式修改

template
// 通过ID直接打印
  <div id="print_demo" >
    <p>打印内容</p>
  </div>
<button v-print="'#print_demo'">打印</button>
3.2使用printObj，可以对打印的表格进行样式调整

template
// 使用printObj
  <button v-print="printObj">打印</button>

<div id="print_demo" style="background:red;">
  <p>打印内容</p>
</div>
script
export default {
    data() {
        return {
            printObj: {
              id: "print_demo",
              popTitle: '打印的标题',
              extraCss: 'https://www.google.com,https://www.google.com',
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            }
        };
    }
}