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

2023-05-20 15:02:03 作者：Insist_bin

这篇文章主要介绍了vue-print-nb解决vue打印问题,并且隐藏页眉页脚方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

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">
这里是要打印的东西
<!-- 打印按钮，通过 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
4、打印时出现页面页脚的解决办法，添加一下 css样式
/*去除页眉页脚*/
  @page{
    size:  auto;   /* auto is the initial value */
    margin: 3mm;  /* this affects the margin in the printer settings */
  html{
    background-color: #FFFFFF;
    margin: 0;  /* this affects the margin on the html before sending to printer */
  body{
    border: solid 1px blue ;
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
  /*去除页眉页脚*/
注意事项：
vue-print-nb 不能打印一些 css3 的样式，比如说一些 UI 组件库的 radio 等。
如果需要打印请自己封装 radio，（试过通过 html2canvas + printJs 打印但是可控性太差，因为只能把页面可见内容转换成 canvas 打印，如果用户屏幕太小，进行转换图片会缺失）
vue实现打印功能（vue-print-nb）
安装vue-print-nb
Vue2.0版本安装方法：
npm install vue-print-nb --save
Vue3.0版本安装方法：
npm install vue3-print-nb --save
引入Vue项目
Vue2.0引入方式：
// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)
// or
// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
  print
Vue3.0引入方式：
// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
// or 
// 2. 自定义指令
import print from 'vue3-print-nb'
directives: {
    print   
在组件中使用
注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id
<!--//通过按钮来调用-->
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button>
<!--//需要打印的页面-->
<div id="printMe" ref="printContent">
        <div class="hammer">
            <h3>黄山市机动车排放维修治理（M）站竣工出厂合格证</h3>
        <!-- //内容 -->
        <div class="trail">
            <p>该车经我站治理维护，准予出厂。</p>
data的return中
  name: "print",
  data() {
    return {
      pageList: [],
      status: false,
      printObj: {
        id: "myPrint", // 这里是要打印元素的ID
        popTitle: "&nbsp", // 打印的标题
        extraCss: "", // 打印可引入外部的一个 css 文件
        extraHead: "", // 打印头部文字
vue-print-nb插件的一些优化
1.去掉页眉页脚
<style>
@page {
    size: auto;
    margin: 0mm;
</style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。
<style>
  .procedure{
      word-wrap:break-word;
</style>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 
您可能感兴趣的文章:
vue-print-nb实现页面打印功能实例(含分页打印)
VUE如何利用vue-print-nb实现打印功能详解
vue中的vue-print-nb如何实现页面打印
vue打印插件vue-print-nb的实现代码
Vue3之路由跳转与参数获取方式
2023-05-05
Vue Echarts实现柱形图从右向左滚动效果
2023-05-05
在vue react中如何使用Web Components组件
2023-05-05
vue启动后请求后端接口报ERR_EMPTY_RESPONSE错误的解决
2023-05-05
vue-print-nb解决vue打印问题,并且隐藏页眉页脚方式
2023-05-05
Vue中的errorHandler异常捕获问题
2023-05-05
vue3.0中的keep-alive使用及说明
2023-05-05
el-form表单el-form-item验证规则里prop一次验证两个或多
2023-05-05
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号