前端打印功能开发print.js

最新推荐文章于 2024-08-23 07:56:48 发布
最新推荐文章于 2024-08-23 07:56:48 发布
阅读量638 收藏
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34563907/article/details/131280811
版权
文章分享了使用原生JavaScript进行打印以及print.js库的体验，特别提到在处理Element-UI框架的表格时遇到的问题，如列显示不全，建议直接编写CSS以获得更好的打印效果。注意避免在table中添加滚动条，以免影响打印结果。
摘要由CSDN通过智能技术生成

自己原生js打印以及使用print.js的体验推荐使用print.js

官网：https://printjs.crabbly.com/
api: https://www.jianshu.com/p/bc079fbb20c7
常遇见的问题：https://blog.csdn.net/weixin_41897680/article/details/124797673
样式一开始用element-ui框架，比如表格会出现很多问题，列显示不全，被截掉之类，所以后面都直接自己写css,简直完美。废话不多说上代码：

 

 

 

 

 

注意table不要加滚动条，会把滚动条打印出来，我是给弹框加了滚动条 

qq_34563907
关注
js几个页面生成pdf 然后批量打印_一个精悍的Javascript库,实现Web打印(print.js)
weixin_39598941的博客
11-29 2045
下载地址在github,文末有使用方法github地址:https://github.com/crabbly/Print.js/官网:https://printjs.crabbly.com/(可能被墙)无法访问可以加企鹅群看离线版:1006429377或者访问:https://www.yuque.com/caiyongjie/snknlo/ga5ef9官网截图简介原文:Print.js was p...
angular打印功能--print.js插件
web
05-14 2211
之前尝试了好几个打印功能，但都有各种问题，综合下来，print.js这个插件的问题最少 我感觉，print.js最大的便利就是可以引入 打印css文件 步骤： 1、下载插件 npm install print-js --save 2、引入到文件 哪个文件需要打印，就引入到哪个文件 import printJS from 'print-js' 这里引入时会报错，报错如下： 解决方法在下面，先把print.js插件流程写完 3、使用 html文件，要打印的内容 <div id="printT
Vue+elemnet UI table表格使用print.js打印
seve_nnight的博客
01-27 1533
1.npm 安装priint.js 2.vue页面引用 import * as Printjs from "print-js"; 3. <el-table id="printCons" :data="tableData" stripe style="width: 100%; margin-top: 30px" border v-loading="loading" >
Print.js 开源项目教程
最新发布
gitblog_00976的博客
08-23 686
Print.js 开源项目教程 PrintA lightweight Android library for use iconic fonts.项目地址:https://gitcode.com/gh_mirrors/pr/Print 项目介绍 Print.js 是一个轻量级的 JavaScript 库，旨在简化网页内容的打印功能。它提供了易于使用的 API，允许开发者通过几行代码就能实现网页内容...
vue使用print.js实现前端打印
Shirley__csdn的博客
03-25 593
前端打印
Print.js javascript库 实现页面打印
sxj的专栏
08-11 9812
npm 安装npm安装时将库导入项目首先，我们需要在页面上包含Print.js库和样式下面主要介绍一下我们要用的打印方法printJS();与相同，这将处理任何一系列样式。例如：['border'，'padding']，将包括'border-bottom'，'border-top'，'border-left'，'border-right'，'padding-top'等。你也可以传递['*']来处理所有样式打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。...
Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
彭世瑜的博客
10-13 4857
最近有一个需求，是让用户通过浏览器可以打印表格内容表格本身是使用了vue2.js + element-ui的el-table实现的，浏览器显示的时候很正常，没有什么异常。创建vue2项目 表格数据 data.js 界面显示 直接 打印效果不是很好。于是，开始寻找解决方案，大致有以下几种思路js打印页面 vue代码 打印预览 发现，直接打印是不行的当使用ctrl+p 拉起打印的时候，发现总有一些小问题，比如该方案适用于页面简单，打印效果过要求不高的场景我们可以通过css媒体查询，将打印按钮隐藏使用css媒体
打印插件 Print.js
sun
04-15 4243
https://printjs.crabbly.com/
LodopFuncs.js打印、前端开发直连打印机打印、js调用驱动 不经过传统预览页面后才可打印问题
06-10
前端LodopFuncs.js打印，js打印，web打印，jq打印，html打印，不需要经过预览页面 直接调起默认打印机进行局部打印。该打印js可局部打印也可全局打印而且该驱动...局部打印功能和jQuery.print.min.js使用方法一样简单。
jquery.print.js
09-18
这个插件是基于jquery-print.js进行了我自己的改造，用来打印canvas中的内容。
使用jQuery.print.js打印
热门推荐
chaolyu的博客
10-12 1万+
需要的类：jquery，jquery.print.js html> head> print test head> body> input id="print_text_input" type="text"> input type="button" value="打印" onclick="print()"> sc
Print.js：一个小巧JavaScript库，可帮助您从网络进行打印
02-21
Print.js 一个小的javascript库，可帮助您从网络上打印。 有关文档和示例，请访问： 安装 您可以从下载最新版本的Print.js，或使用文档页面上可用的 。 通过npm安装： npm install print-js --save 通过纱线安装： yarn add print-js 将库导入到您的项目中： import printJS from 'print-js' 文献资料 您可以在找到文档。 贡献给Print.js 我们非常欢迎和鼓励对Print.js的贡献。 使用问题 是报告错误，请求新功能和提交请求请求的首选渠道。 请记住，我们希望保留一个轻量级的库。 请不要将问题渠道用于支持请求。 有关使用Print.js的帮助，请在Stack Overflow上提问并使用标签printjs 。 报告错误 结构良好，详细的错误报告对于项目非常有价值。 检
前端项目-jQuery.print.zip
09-02
在前端开发中，有时我们需要实现页面的特定部分打印功能，而不是整个页面。"前端项目-jQuery.print.zip" 提供了一个方便的解决方案，它是一个基于jQuery的打印插件——jQuery.print。这个插件允许开发者轻松地选择并...
ElementUi 使用PrintJs 实现基础打印功能
onlylele的博客
07-07 7436
打印预览效果： 代码简单实现： <el-button size="small" plain type="primary" @click="CreateOneFormPage">打印采购单</el-button> <el-table id="printJS-form" ref="table" :data="purchase_item" show-summ
element ui表格打印_ElementUi 使用PrintJs 实现基础打印功能
weixin_39802784的博客
12-24 1790
打印预览效果：代码简单实现：打印采购单id="printJS-form"ref="table":data="purchase_item"show-summary:summary-method="getSummaries"style="width:100%">{{row.sku_sn}}{{row.item_sn}}......略过importprintfrom'print-j...
开发实现打印功能,1.window.print()实现打印,2.print.js实现打印功能
Uxiao7的博客
08-20 729
1.window.print() 新建一个html直接复制粘贴，打开项目 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <st
vue使用print.js打印插件
Fabricant的博客
08-06 8444
任务：解决vue页面局部打印功能 print.js插件，可以打印 html、pdf、json数据 官网：https://printjs.crabbly.com/ 一个整理的很好的讲解:https://www.jianshu.com/p/bc079fbb20c7 一、步骤： 1.安装插件 npm install print-js --save 2.在需要打印的页面导入库 import print from 'print-js' 3.在vue文件中新建一个打印div盒子 ，设一个 id 值（printB
print.min.js 打印elementUI table怎么才能不继承样式列宽度
qq_34353337的博客
03-27 285
要在打印ElementUI表格时不继承样式和列宽度，您可以在打印样式表中为表格添加自定义样式。如果您使用的是Vue.js或Nuxt.js等框架，则可以将此样式表添加到您的Vue组件或页面的样式表中，以确保仅在打印时应用此样式。如果您只是使用纯HTML和CSS，则可以将此样式表放在页面的头部或尾部，并在打印时手动启用打印功能。上面的代码将移除表格及其单元格的边框和内边距，并将字体大小设置为12像素。此外，它还将强制将表格的列宽度设置为自动，并将最大宽度设置为无限制，以确保表格在打印时能够自适应页面宽度。
element ui+vue实现打印
baozaoderenlei的博客
04-09 4002
1.安装组件 //安装print-js npm install print-js --save //删除print-js npm uninstall print-js //安装固定版本 npm install print-js@版本号 --save // 全局安装 npm install print-js --save -g 2.在页面引入组件 import print from 'print-js' 3.自己实现子组件打印页面 4.在需要打印的页面引入子组件 //注册 compon
Vue.js前端实现PDF下载与打印功能
打印功能可以通过JavaScript调用浏览器的打印API来实现，例如`window.print()`。为了更好的用户体验，通常会结合打印样式表（CSS中的@media print规则）来控制打印版页面的样式，确保打印输出的布局和内容符合预期...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值