vue 实现打印功能

这篇具有很好参考价值的文章主要介绍了vue 实现打印功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. window.print()

浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图内容。调用此方法会产生一个打印预览弹框,用户可以根据具体设置来得到打印结果。

2. 使用插件vue-print-nb

调用 window.print() 会对整个 document.body 进行打印,而我们通常只需要打印一部分页面,可以使用打印插件vue-print-nb

vue-print-nb使用自定义指令 v-print来进行打印,点击就能触发

1.安装

npm install vue-print-nb --save

2.在main.js文件中注册使用

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

3.具体使用方法:

(1)绑定id方法 (2)绑定对象方法

<!--绑定id方法-->
<div id='printBox'>
   <div>需要打印的内容</div>
</div>
<button v-print='#printBox'>点击打印</button>
<!--绑定对象方法-->
<div id='printBox'>
   <div>需要打印的内容</div>
</div>
<button v-print='printObj'>点击打印</button>

export default{
   data(){
     return {
      printObj:{
	       id:'printBox', // 必要,打元素的id
	       popTitle: '打印', // 打印配置页上方标题
	       extraHead: '', //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
	       preview: '', // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
	       previewTitle: '', // 打印预览的标题(开启预览模式后出现),
	       previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
	       zIndex: '', // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)   
	       previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用)
	       previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
	       beforeOpenCallback() {}, // 开启打印前的回调事件
	       openCallback() {}, // 调用打印之后的回调事件
	       closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消)
	       url: '',
	       standard: '',
	       extraCss: '',
        }
     }
   }
}

4. 屏蔽不需要打印的元素

在组件的打印区域里,给需要隐藏的内容的标签上添加class="noprint"

5.配置打印的样式

在全局样式中,新增标签,里面是打印时才生效的样式

<style media="print">
@page {
  size: auto;
  margin: 3mm;
}

html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
</style>

6.打印內容不自动换行问题

只需要给不自动换行的标签加上 word-wrap:break-word; 即可。

<style>
  .procedure{
      word-wrap:break-word;
   }
</style>

7.缺点

(1)无法打印本地图片,当需要打印的部分有本地图片时,打印之后图片不会显示。
(2)使用elementUI表格vxe-table表格打印时,会出现样式问题

8. 分页打印

不要使用定位,否则无法分页

<template>
	<div>
		<button v-print="'#print'">打印</button>
		<div id="print">
             // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页
			<div style="page-break-after:always">这是第二页</div>
			<div style="page-break-after:always">这是第二页</div>
		</div>
	</div>
</template>


3. 使用插件print.js

插件文档:https://printjs.crabbly.com/

1.安装

npm install print-js --save

2. 使用

在需要打印功能的组件中引用文章来源地址https://www.toymoban.com/news/detail-703701.html

 import print from 'print-js'
<div id="printBox"> 打印内容</div>
<button  @click="printClick()">点击打印</button>
printClick() {
      const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
      printJS({
        printable: 'printBox',// 标签元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      });
      //各个配置项
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json时所需要的数据属性。
      //gridHeaderStyle和gridStyle都是打印json时可选的样式。
      //repeatTableHeader:在打印JSON数据时使用。设置为时false,数据表标题将仅在第一页显示。
      //scanStyles:设置为false时,库将不处理应用于正在打印的html的样式。使用css参数时很有用,此时自己设置的原来想要打印的样式就会失效,在打印预览时可以看到效果
      //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
      //style:传入自定义样式的字符串,使用在要打印的html页面 也就是纸上的样子。
      //ignoreElements:传入要打印的div中的子元素id,使其不打印。非常好用
    },
  }

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

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

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

相关文章

  • vue使用打印组件print-js

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

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

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

    2024年02月05日
    浏览(103)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(下)

    在进入文章的正文之前,我们先一起了解一下关于 CSDN 今年的 1024 程序员节。与此同时这也是我在 CSDN 参与的第二个 1024 程序员节日,转眼间也快写博客两年时间,去年很遗憾没有去到深圳(疫情原因)线下参加这个有趣而充实的峰会。今年没有特殊情况的话一定会如约而至

    2024年02月06日
    浏览(48)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)

    今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的使用,以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联

    2024年02月06日
    浏览(44)
  • Vue前端实现excel的导入、导出、打印功能

    导入导出依赖: npm install xlsx@0.16.9 npm install xlsx-style@0.8.13 --save 安装xlsx-style,运行报错 This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js 解决报错 在node_modulesxlsx-styledistcpexcel.js 807行 的 var cpt = require(\\\'./cpt\\\' + \\\'able\\\'); 改为: var cpt = cptable; 打印

    2023年04月08日
    浏览(46)
  • Print.js实现打印pdf,HTML,图片(可设置样式可分页)

    目录 一.安装及引入Print.js 二.介绍 三.常用配置 四.具体使用 一.安装及引入Print.js 1.安装 2.在需要使用的文件引入 二.介绍 Print.js有四种打印类型:\\\'pdf\\\'、\\\'html\\\'、\\\'image\\\'、\\\'json\\\'。 它的基本用法是调用printJS()并传入参数 三.常用配置 Print.js接受一个对象作为参数,在这里你可以配置

    2024年02月06日
    浏览(46)
  • vue3-print-nb 实现页面打印(含分页打印)

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

    2024年02月09日
    浏览(43)
  • 【Vue】Vue 使用 Print.js 打印选中区域的html,用到的是Element ui table表格,解决页面样式不出现或者table表格样式错乱问题!!!

    需求 : 打击打印按钮,文字内容以及表格中的内容 解决方案 加上这句就好了!完美! 一、因为表格数据过多,之前加了表格滚动条,但是打印出来 会把表格上的滚动条也打印出来,所以这里改成了 给弹框加滚动条,去掉表格中的滚动条 2.1 原因: table-layout: fixed导致的,

    2024年02月09日
    浏览(66)
  • 一文弄懂window.print()打印

    https://developer.mozilla.org/en-US/docs/Web/API/Window/print 一般信息填写类的需求页面,都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图,而 打印则是基于预览来生成 PDF 文件 。 浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图内容

    2024年02月08日
    浏览(42)
  • vue 导出多页pdf, window.print()实现

    如果你对分页打印没思路,而网上的现成方案又不适合,不妨进来看看,也许会对你有帮助. 由于工作环境是局域网,对于插件的安装有限制,所以排除了jspdf + html2canvas的实现方式;采用window.print(),就会涉及到表格的截断、文本的截断等问题,而且需求要求每一页的pdf都有固

    2024年02月19日
    浏览(36)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包