首页 > 其他分享 >vue-print 实现打印功能

vue-print 实现打印功能

时间:2023-05-05 13:11:32浏览次数:46  
标签:vue name money 打印 address print

一、安装

1. Vue2

npm install vue-print-nb --save
import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);

//or

// Local instruction
import print from 'vue-print-nb'

directives: {
    print   
}

2. Vue3

npm install vue-print-nb --save
// Global instruction 
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

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

二、基本使用

1. 直接打印页面HTML

1)方法
① 给要打印的部分设置一个 id
② 在打印按钮中添加 v-print="'#id名'"

2)代码(以表格为例)

<template>
  <div>
    <a-button v-print="'#printMe'">打印</a-button>
    <a-table :columns="columns" :data-source="data" bordered id="printMe">
  	</a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '¥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '¥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '¥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>

2. 个性化设置

(1)方法
打印按钮的 v-print 绑定一个对象
(2)代码

<template>
  <div class="box">
    <a-table :columns="columns" :data-source="data" bordered id="printMe"></a-table>
    <a-button v-print="printContent" class="btn no-print">打印</a-button>
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '¥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '¥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '¥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
      tableHead: '测试表格',
      printContent: {
        id: "printMe", // 打印的区域
        preview: false, // 预览工具是否启用
        previewTitle: '这是预览标题', // 预览页面的标题
        popTitle: '', // 打印页面的页眉
        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback() {
          console.log('正在加载预览窗口')
        },
        previewOpenCallback() {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback() {
          console.log('关闭了打印工具')
        },
        clickMounted(vue){
          console.log('点击了打印按钮');
          vue.printContent.popTitle = vue.tableHead // 动态设置页眉
        }
      }
    }
  }
};
</script>

3 效果展示
① 预览工具

3. 打印URL

1 方法
① 给 打印按钮的 v-print 绑定一个对象
② 对象添加 url 属性

2 代码

<template>
  <div class="box">
    <a-table :columns="columns" :data-source="data" bordered></a-table>
    <a-button v-print="printContent" class="btn no-print" >打印</a-button>
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '¥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '¥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '¥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
      tableHead: '测试表格',
      printContent: {
        url: 'http://localhost:8081/', // 打印的url
        preview: false, // 预览工具是否启用
        previewTitle: '这是预览标题',
        popTitle: '', // 打印页面的页眉
        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      }
    }
  },
};
</script>

标签:vue,name,money,打印,address,print
From: https://www.cnblogs.com/panwudi/p/17373810.html

相关文章

  • vue3学习第一课
    1,先安装npmbrewinstallnpmnpminitvite-appvue3demmocdvue3demmonpminstallnpmrundev ......
  • vue 实现页面跳转
    1、router-link跳转//直接写上跳转的地址<router-linkto="/detail/one"><spanclass="spanfour">link跳转</span></router-link>//添加参数<router-link:to="{path:'/detail/two',query:{id:1,name:......
  • 在vue中使用axios的步骤(保姆级)
    一、基础用法1.安装axiosnpmiaxios2.引入axios//引入axiosimportaxiosfrom'axios'3使用//发起一个post请求axios({method:'post',url:'http://192.168.0.88:8888/api/private/v1/login',data:{username:'admin'......
  • 基于SqlSugar的开发框架循序渐进介绍(29)-- 快速构建系统参数管理界面-Vue3+ElementPlus
    在随笔《基于SqlSugar的开发框架循序渐进介绍(28)--快速构建系统参数管理界面》中介绍了基于SqlSugar开发框架,构建系统参数管理的后端API部分,以及WInform界面部分内容,本篇随笔介绍基于Vue3+ElementPlus的前端界面开发过程。1、Winform端界面的回顾系统参数的信息,设计为包含一个大......
  • 前端VUE自动检测版本更新
    前言当用户在当前站点停留时间比较长,中途站点进行升级更新之后,用户如果不刷新页面就任然停留在旧的页面里,如何让用户收到一个提示,引导用户进行更新操作呢?下面给大家介绍如何站点更新如何在生产环境提示用户更新,进行页面刷新操作,核心原理其实很简单。一、思路1,每隔一小段时间f......
  • Win10更新KB5007186后共享打印机无法使用
         卸载大概10几分钟,卸载完之后会提示重启电脑,耐心等待重启,重启完成即可正常打印。为防止电脑的继续更新导致又出现这个问题,目前只能通过延迟win10的自动更新   ......
  • vue中配置使用axios
    简单示例代码:请求网络的js逻辑,可以放到request.js文件中,放在目录utils下;importaxiosfrom"axios";axios.defaults.withCredentials=true;//创建axios实例constinstance=axios.create({//`headers`请求头的通用配置headers:{//'X-Requested-W......
  • java基于springboot+vue的宿舍管理系统、学生宿舍管理系统、高校宿舍管理系统,附源码+
    1、项目介绍java基于springboot+vue的宿舍管理系统、学生宿舍管理系统、高校宿舍管理系统,实现管理员:首页、个人中心、公告信息管理、院系管理、班级管理、学生管理、宿舍信息管理、宿舍安排管理、卫生检查管理、报修信息管理、报修处理管理、缴费信息管理,学生;首页、个人中心、公......
  • vue 选择图片或者拍照上传,数据在外层取不到/拿不到解决。
    <inputtype="file"accept="image/*"capture="camera"@change="onImageChange"class="inputClass"/>//调用asynconImageChange(e){this.capImg=awaitthis.onImageChange(e)console......
  • vue-esign 学习笔记
    1注意事项最新版是1.1.4,我们项目组用的是1.1.0。从npmjs可以看出,两个版本中间的版本都是不可用的,下载量为0.除此之外还可以参考的类似工具:https://www.npmjs.com/package/vue-esignaturevue-esignaturehttps://www.npmjs.com/package/vue3-esignvue3-esign2链接地址http......