vue-print-nb 解决 vue 打印问题，并且隐藏页眉页脚

最新推荐文章于 2025-03-25 08:59:39 发布

Insist_bin

最新推荐文章于 2025-03-25 08:59:39 发布

阅读量1.6w

点赞数 9

分类专栏： vue 文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/Insist_bin/article/details/107477630

版权

1、通过 npm 安装 vue-print-nb

npm install vue-print-nb --save

2、挂载到 Vue 上

import Print from 'vue-print-nb'
Vue.use(Print)

3、配置打印对象

<div id="main">
这里是要打印的东西
</div>
<!-- 打印按钮，通过 v-print 调用打印事件 -->
<button v-print="printObj">打印</button>

export default {
    name: "XssqAddActivity",
    data() {
      return {
         printObj: {
          id: "main",    // 这里是要打印元素的ID
          popTitle: '',  // 打印的标题
          extraCss: '',  // 打印可引入外部的一个 css 文件
          extraHead: ''  // 打印头部文字
        },
      } 
    }
}

这是 vue-print-nb 的官网地址：

https://www.npmjs.com/package/vue-print-nb</