vue-print 实现打印功能

这篇具有很好参考价值的文章主要介绍了vue-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 vue3-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)效果展示
① 预览工具
vue-print 实现打印功能

3. 打印URL

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

2)代码文章来源地址https://www.toymoban.com/news/detail-430548.html

<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>

三、API

Parame Explain Type OptionalValue DefaultValue
id Range print ID, required value String
standard Document type (Print local range only) String html5/loose/strict html5
extraHead Add DOM nodes in the node, and separate multiple nodes with , (Print local range only) String
extraCss New CSS style sheet , and separate multiple nodes with ,(Print local range only) String
popTitle Content of label (Print local range only) String
openCallback Call the successful callback function of the printing tool Function Returns the instance of Vue called at that time
closeCallback Close the callback function of printing tool success Function Returns the instance of Vue called at that time
beforeOpenCallback Callback function before calling printing tool Function Returns the instance of Vue called at that time
url Print the specified URL. (It is not allowed to set the ID at the same time) String
asyncUrl Return URL through ‘resolve()’ and Vue Function
preview Preview tool Boolean false
previewTitle Preview tool Title String ‘打印预览’
previewPrintBtnLabel The name of the preview tool button String ‘打印’
zIndex CSS of preview tool: z-index String,Number 20002
previewBeforeOpenCallback Callback function before starting preview tool Function Returns the instance of Vue
previewOpenCallback Callback function after fully opening preview tool Function Returns the instance of Vue
clickMounted Click the callback function of the print button Function Returns the instance of Vue

到了这里,关于vue-print 实现打印功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3-print-nb 实现页面打印(含分页打印)

    全局引入 局部引入 官网地址: https://github.com/Power-kxLee/vue3-print-nb 官网有详细介绍 全页面打印 局部打印 被打印的区域需要被渲染出来,隐藏的元素不能打印 分页打印

    2024年02月09日
    浏览(45)
  • vue使用打印组件print-js

    由于甲方要求,项目需要打印二维码标签,故开发此功能 安装包:npm install print-js --save print-js的使用 例如:在打印过程中会出现字体样式失效的问题:          加入这行代码即可 font_size: \\\'\\\',

    2024年02月10日
    浏览(63)
  • 前端使用print.js实现打印

    项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容。下面的内容基于vue。 如果需要用到前端生成二维码可以看我的这篇文章: 在vue项目中使用qrcodesjs2生成二维码 注:以下都是基于edge浏览器进行的,另外身边

    2023年04月09日
    浏览(41)
  • window.print() 前端实现网页打印详解

    目录 前言  一、print()方法  二、打印样式 2.1使用打印样式表 2.2使用媒介查询 2.3内联样式使用media属性 2.4在css中使用@import引入打印样式表 三、打印指定区域部分内容 3.1方法一 3.2方法二 3.3方法三 四、强制插入分页 4.1page-break-before(指定元素前添加分页符) 4.2page-break-afte

    2024年02月02日
    浏览(35)
  • 使用Vue @media print在JavaScript中插入不同尺寸的打印页面,可自定义尺寸大小和打印机配置

    本文介绍了如何在Vue项目中使用@media print和JavaScript来插入不同尺寸的打印页面,并提供了代码编写、使用教程、注意事项和避坑点,最后进行了总结。 在开发Web应用程序时,经常需要提供打印功能。Vue框架提供了@media print媒体查询,可以根据打印需求自定义打印页面的样式

    2024年02月05日
    浏览(106)
  • 【vue】实现打印功能

    一、vue-print-nb 官网地址:https://github.com/Power-kxLee/vue3-print-nb 【1】安装 【2】引用 vue2 引用 vue3 引用 【3】API 属性 类型 默认值 必要 可选值 描述 id String - 是 - 范围打印 ID(如果设置url则可以不设置id) url String - 否 - 打印指定的 URL。(不允许同时设置ID popTitle String - 否 - 默认

    2023年04月08日
    浏览(36)
  • vue 实现打印功能

    浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图内容。调用此方法会产生一个打印预览弹框,用户可以根据具体设置来得到打印结果。 调用 window.print() 会对整个 document.body 进行打印,而我们通常只需要打印一部分页面,可以使用打印插件 vue-print-nb vue

    2024年02月09日
    浏览(36)
  • vue实现打印功能

    在Vue应用中调用打印机功能,可以使用 JavaScript 的 window.print() 方法。这个方法会打开打印对话框,然后让我们选择打印设置并打印文档,但是尼这种方法依赖于浏览器的打印功能。 以下是一个简单的示例,演示如何在Vue组件中调用打印功能: 在Vue组件中,将需要打印的内容

    2024年02月12日
    浏览(37)
  • vue笔记——实现打印功能1

    第一步:安装vue-print-nb,打开项目终端输入 npm install vue-print-nb --save 第二步:打开package.json文件,在dependencies中出现vue-print-nb,说明安装成功,如下图所示。  第三步: 方法一:全局导入 在main.js文件输入以下代码: // 导入vue-print-nb import Print from \\\'vue-print-nb\\\' Vue.use(Print) 第四步

    2024年02月07日
    浏览(33)
  • vue3问题:如何实现打印功能?

      编辑排版  | 宋大狮 平台运营  | 小唐狮 ONE 问题描述 2023年4月22号记,久违了大家。 今天要和大家分享的是关于如何实现表单、表格等自定义内容的打印功能。 最近在后台项目中,有遇到打印详情页的需求,因为开发中此功能用的次数不多,所以放在此处仅做一下记录

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包