前端实现打印功能（纯前端实现）

已于 2022-03-28 10:08:43 修改
阅读量1.4k 收藏
点赞数
分类专栏： js开发中常用的工具类总结 文章标签： webstorm 前端 vue.js
于 2022-03-28 10:06:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigdargon/article/details/123787949
版权
本文介绍了两种在前端实现打印功能的方法。第一种是通过npm安装插件，包括安装、引入、使用及指定不打印区域的技巧。第二种方法是手动下载print.js插件到本地，并在src/plugs文件夹下进行配置，注意避免github上的$ref错误问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用插件 vue-print-nb

第一种方法：通过npm 安装插件

1，安装

install vue-print-nb --save

2，引入 安装好以后在main.js文件中引入

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

3，现在就可以使用了

<div id="printTest" >
　　<p>hello
最低0.47元/天 解锁文章
前端实现打印功能的方式
EipGemms的博客
10-04 1110
在前端开发中，打印功能是一个常见需求，允许用户将当前页面或特定内容打印成纸质文档。方法来触发打印操作。选择合适的方法，根据你的需求为用户提供打印功能，以增强网站的可用性和用户体验。这样，我们可以隐藏或重新排列某些元素，以适应打印的需求。上述代码创建了一个按钮，当用户点击按钮时，浏览器将弹出打印对话框，并打印当前页面。除了浏览器原生的打印功能，还有一些第三方库可以提供更多的定制选项和功能。属性指定了要打印的元素的ID，可以是整个页面或特定的DOM元素。是一个常用的前端打印库，可以用于在浏览器中控制打印操作。
前端实现调用打印机和小票打印(TSPL )功能
m0_74823524的博客
12-25 1645
可能想到 的是 , 直接用浏览器打印,通过 `window.print()调用,但是会弹出来操作页面,不行 领导说这样不行不美观不通透 否决.这个需求的重点不是打印的内容,不管是内容添加到iframe里还是将打印内容转为图片 而是想直接打印.无痛的那种,思来想去,也就只有python能这样做了,python写好脚本编译成exe然后用node调用,没办法只好这样曲线救国了.现在这个tspl.class.js中 基本的常用的都添加完了,二维码,条形码,文本.图片,下划线,绘制盒子,绘制色块。
vue打印插件使用
11-26
vue打印插件使用 第一步: npm install vue-easy-print --save 第二步，在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: slot-scope func.getChineseNumber接收到的方法是一个将金额转换成中文的 配置props参数 // 针对分页表格模式：末尾空白行插入 spaceRow: { type:Boolean, default:false, }, // 针对分页表格模式：传入的打印数据。 tableData:{ type:Object, default() { return undefined } }, // 是否显示表格 tableShow:{ type:Boolean, default:false }, // 每页多少行 onePageRow: { type:Number, default:5, }, // 复制打印页面前调用的钩子 beforeCopy:Function, // 打印页面前调用的钩子 beforePrint:Function,
vue实现打印功能的两种方法
didumin1941的博客
03-28 3132
第一种方法：通过npm 安装插件 1，安装npm install vue-print-nb --save 2，引入 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' 　　Vue.use(Print); //注册 3，现在就可以使用了 <div id="printTes...
window.print() 前端实现网页打印详解
最新发布
有问题可关注公众号：前端研究院 后台输入问题回复
04-23 307
前言print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。一、print()方法print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。
【vue】实现打印功能
SunPeng的博客
11-27 1万+
【vue】实现打印功能
vue插件——vue-print-nb 实现打印功能
yehaocheng520的博客
02-26 1万+
vue插件——vue-print-nb 实现打印功能
vue实现打印功能
weixin_49421056的博客
04-04 328
1.下载包 npm i vue-print-nb 2.全局注册 在main.js中全局注册 import Print from 'vue-print-nb' Vue.use(Print) 3.使用 全局注册后就可以给按钮绑定v-print指令，v-print绑定的内容就是我们打印的内容，例如我们可以在data()里定义我们需要打印的内容id='box’就可以把整个id为box的div盒子打印下来 <template> <div id="box" class="home">
前端打印时js分页实现共几页和第几页
08-06
本文将详细介绍如何使用JavaScript（js）在前端实现分页功能，包括显示总页数、当前页数，以及触底自动换页，并在每页表头增加固定部分，如金额大写转换和当前时间获取。 一、分页基础 1. 数据分块：分页的核心是...
前端项目：实现纯JavaScript PDF打印功能
- 此外，pdfmake与前端框架如React、Vue或Angular等整合也很方便，能够满足现代Web应用对PDF打印功能的需求。 4. **服务器端应用** - 描述中提到“客户端/服务器端pdf打印”，这意味着pdfmake不仅可以在前端环境...
idea 部署git总结_specify commit message(1)
2401_84433924的博客
04-28 1162
github密匙快捷获取方法idea将本地项目上传到远程仓库GitHub报错-》error: src refspec master does not match any.
vue如何实现打印功能
热门推荐
Cherry
08-06 2万+
这里用的是 vuePlugs_printjs 1，首先打开git地址 2，然后将 print.js 下载到本地放入项目文件夹 使用方法如下： //首先在main.js引入 import Print from './utils/print.js' Vue.use(Print) <div ref=print>打印内容<div/> //其次在你用到的地方触发这个方法即可 handleprinter() { this.$print(this.$refs.print); } 当
Vue实现打印功能
wtyzky的博客
06-05 9175
Vue实现打印功能第一步 安装打印插件第二步 在main.js中进行引入第三步 给需要打印的区域添加id，然后再添加一个打印按钮为按钮添加 v-print 属性，属性的值就是'#+id'然后就可以实现打印功能了，点击打印按钮直接唤起打印功能。非常简单好用，下面附上效果图，我这里用的是element-UI做的溯源码打印界面。 第一步 安装打印插件 npm install vue-print-nb --save 第二步 在main.js中进行引入 import Print from 'vue-print-
vue 实现打印功能
qq_53489791的博客
12-27 5686
vue 打印
Vue 实现打印功能
chenfairy的博客
01-26 360
Vue实现print 第一步 安装组件 //安装print-js npm install vue-print-nb --save 第二步在 main.js 全局引入 // 引入下载的print import print from 'vue-print-nb' // 全局使用 Vue.use(print); 第三步使用 <template> <div>...
Vue项目实现web端打印页面
我的博客
02-25 530
一、封装一个print.js文件，放在目录/utils下 // print.js export function clear () { const iframes = document.body.querySelectorAll('iframe.print-iframe') iframes.forEach(iframe => { document.body.removeChild(iframe) }) } export function print (el) { //
vue-实现打印功能
tzz_1122的博客
10-10 3497
4 设置页面内容样式（因为有些样式会丢失，这里可以补上）1 判断是否有上次创建的iframe元素，若有，移除。2创建iframe元素，并给class类名，方便移除。5 调用浏览器的打印方法实现打印。3 设置打印页面内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值