位置: IT常识 - 正文

Print.js实现打印pdf,HTML,图片(可设置样式可分页)(print-js)

编辑:rootadmin
Print.js实现打印pdf,HTML,图片(可设置样式可分页) 一.安装及引入Print.js

推荐整理分享Print.js实现打印pdf,HTML,图片(可设置样式可分页)(print-js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js 直接打印,js window.print,js打印输出,print-js,js window.print,js println,print-js,print-js,内容如对您有帮助,希望把文章链接给更多的朋友!

1.安装

npm install print-js --save//oryarn add print-js

2.在需要使用的文件引入

import printJS from 'print-js'二.介绍

Print.js有四种打印类型:'pdf'、'html'、'image'、'json'。

Print.js实现打印pdf,HTML,图片(可设置样式可分页)(print-js)

它的基本用法是调用printJS()并传入参数

//pdf打印 传入PDF文档urlprintJS('docs/PrintJS.pdf')//图片打印 传入图片url,第二个参数:'image'printJS('images/PrintJS.jpg', 'image')//html打印 第一个参数:元素id,第二个参数:'html'printJS('myElementId', 'html')//json打印 当打印Json数据时,传入要打印的数据、类型和数据属性printJS({printable: myData, type: 'json', properties: ['prop1', 'prop2', 'prop3']})三.常用配置

Print.js接受一个对象作为参数,在这里你可以配置一些选项:

字段默认值                                      说明printable null数据源:pdf or image的url,html类型则填打印区域元素id,json类型则是数据object。type'pdf'可选类型:pdf, html, image, json。headernull    应用于页面顶部标题文本。headerStyle'font-weight: 300;'应用于标题文本的可选标题样式。maxWidth800最大文档宽度(像素)。cssnull这允许我们传递一个或多个css文件的url,应该应用到正在打印的html。Value可以是包含单个URL的字符串,也可以是包含多个URL的数组。stylenull这允许我们传递一个自定义样式的字符串,该字符串应应用于正在打印的html。四.具体使用

1.打印Html

<div id="printJS-HTML" style="display:none;"> <div v-for="index in 5" :key="index"> <table> <tr> <td>序号</td> <td>作者</td> </tr> <tr> <td>1</td> <td>Ghmin</td> </tr> </table> <!-- 控制打印分页的关键 --> <div class="paging"></div> </div></div><button @click="printHtml">打印 HTML</button>const printHtml=()=>{ //在页面显示需打印区域来获取dom document.querySelector('#printJS-HTML').style.display = 'block' printJS({ printable: 'printJS-HTML',//打印区域id type: 'html',//打印类型 style: `@page { size: auto; } .paging{page-break-after: always;}`, }) //获取打印内容后隐藏dom document.querySelector('#printJS-HTML').style.display = 'none'}

这里 .paging{page-break-after: always;}样式就是控制分页的关键。

2.打印图片

打印图片的话可以使用上面第一种Html的方式,但更推荐使用Print.js提供的"image"打印类型

printJS({ printable: ['第一张图片Url','第二张图片Url','第三张图片Url'], type: 'image', header: null, imageStyle: `display: block;margin: 0 auto;page-break-after: always;max-width:100%` })

相对于Html方式这个更简单,传入需要打印的图片url数组即可。

更多内容可访问 Print.js官网:https://printjs.crabbly.com/

本文链接地址:https://www.jiuchutong.com/zhishi/285153.html 转载请保留说明!

上一篇:怎么无损数据地将动态磁盘转换为基本磁盘(无损数据分区)

下一篇:一公顷等于多少平方米(一公顷等于多少千米)

  • 浅谈营销推广邮件营销的有效性(营销推广具有什么特点)

    浅谈营销推广邮件营销的有效性(营销推广具有什么特点)

  • 惠普电脑怎么拍照(惠普电脑怎么拍照没有拍照键)

    惠普电脑怎么拍照(惠普电脑怎么拍照没有拍照键)

  • 苹果13怎么设置丢失模式(苹果13怎么设置来电闪光灯)

    苹果13怎么设置丢失模式(苹果13怎么设置来电闪光灯)

  • 小米10如何设置动态壁纸(小米10如何设置4g)

    小米10如何设置动态壁纸(小米10如何设置4g)

  • 快手如何锁屏播放声音(快手如何锁屏还能听视频声音)

    快手如何锁屏播放声音(快手如何锁屏还能听视频声音)

  • 微信能实名认证几个号(微信能实名认证别人的吗)

    微信能实名认证几个号(微信能实名认证别人的吗)

  • 云空间不足什么意思(云空间不足是怎么回事)

    云空间不足什么意思(云空间不足是怎么回事)

  • 抖音要不要加入公会

    抖音要不要加入公会

  • 如何判断硬盘磁头坏了(怎么判断硬盘)

    如何判断硬盘磁头坏了(怎么判断硬盘)

  • 华为p40门禁卡怎么用(华为p40门禁卡怎么改名字)

    华为p40门禁卡怎么用(华为p40门禁卡怎么改名字)

  • 光猫光纤信号灯蓝闪(光猫光纤信号灯一直闪绿灯)

    光猫光纤信号灯蓝闪(光猫光纤信号灯一直闪绿灯)

  • 微信黑名单对方还能添加好友吗(微信黑名单对方换头像可以看到吗)

    微信黑名单对方还能添加好友吗(微信黑名单对方换头像可以看到吗)

  • 苹果11通话能不能录音(苹果11通话不好什么原因,听不到对方说话)

    苹果11通话能不能录音(苹果11通话不好什么原因,听不到对方说话)

  • 1080p30和1080p60区别(1080p30fps与1080p60fps哪个好)

    1080p30和1080p60区别(1080p30fps与1080p60fps哪个好)

  • 苹果手机的充电线是不是都是一样的(苹果手机的充电器都一样吗)

    苹果手机的充电线是不是都是一样的(苹果手机的充电器都一样吗)

  • vivox30pro是不是曲面屏(vivox30pro是什么手机)

    vivox30pro是不是曲面屏(vivox30pro是什么手机)

  • 怎么把qq好友导入微信(怎么把qq好友导入电脑)

    怎么把qq好友导入微信(怎么把qq好友导入电脑)

  • word的绘制画线怎么画(word中绘制线条怎么操作?)

    word的绘制画线怎么画(word中绘制线条怎么操作?)

  • 多闪能看到访问记录吗(多闪看过的人在哪里)

    多闪能看到访问记录吗(多闪看过的人在哪里)

  • vivos1pro是闪充还是快充(vivos1pro充电器)

    vivos1pro是闪充还是快充(vivos1pro充电器)

  • 网易网盘为什么关闭(网易网盘为什么不能投屏)

    网易网盘为什么关闭(网易网盘为什么不能投屏)

  • 11pro支持5g吗(苹果11pro支持5g吗)

    11pro支持5g吗(苹果11pro支持5g吗)

  • 苹果a11有必要换a12吗(苹果11可以换a14处理器吗)

    苹果a11有必要换a12吗(苹果11可以换a14处理器吗)

  • 荣耀20采用什么屏幕(荣耀20是什么型号)

    荣耀20采用什么屏幕(荣耀20是什么型号)

  • 华为nova5是什么系统(华为nova5i多少钱)

    华为nova5是什么系统(华为nova5i多少钱)

  • 华为mate50耳机孔位置(华为mate50耳机孔和充电口一样吗)

    华为mate50耳机孔位置(华为mate50耳机孔和充电口一样吗)

  • js表单验证密码(确认密码),密码长度至少8位,并且英文与数字组合(js表单验证代码)

    js表单验证密码(确认密码),密码长度至少8位,并且英文与数字组合(js表单验证代码)

  • vue中深度选择器(css deep深度选择器)

    vue中深度选择器(css deep深度选择器)

  • 我国税收居民
  • 应纳税所得额的会计分录
  • 个体户转一般纳税人怎么做账
  • 抵扣联 发票联
  • 管道安装固定方式
  • 研发费用扣除比例是百分75吗
  • 办公设备维修费会计分录
  • 快递公司结算员工作量大不大
  • 预提返利的会计处理
  • 公益捐赠税前扣除凭证
  • 企业重组中撤资所得税有哪些处理规则?
  • 软件技术服务合同需要备案吗
  • 免税商品进项税可以抵扣吗
  • 代开专票需要去报税吗?
  • 开票资料没有电话号码可以写法人名字吗
  • 发票显示上传失败
  • 零申报资产总额填注册资本怎么办呢
  • 京挑客怎么赚钱
  • 公司账户替别人过账
  • Win11怎么自定义鼠标指针图案
  • 库存商品过多说明什么问题
  • 怎么安装win7系统步骤
  • 以前年度应付账款转收入
  • 设备安装需要预缴吗
  • 查补增值税的会计处理
  • 员工福利费会计处理
  • win11的09累积更新
  • 委托加工应税消费品的纳税义务人是受托方
  • thinkphp技术
  • php基于SQLite实现的分页功能示例
  • 自然vc
  • 超限量发票申请下来后怎么操作
  • yaf框架优缺点
  • php js
  • vuex的五个属性及使用方法 简书
  • vue的路由跳转了,可是页面没有变化
  • 前端 大前端
  • python优化工具箱
  • 关于持股平台的法律法规
  • ps怎么把多余的p掉
  • 报废产品需要入库吗
  • 增值税普通发票几个点
  • 帝国cms采集标签
  • 织梦dedecms如何升级ckeditor
  • 印花税实收资本和资本公积
  • 代收代缴水费可以加多少损耗
  • 房地产开发公司组织架构
  • c语言中函数的数据类型是指
  • 出差飞机票会计分录
  • 银行贷款可以置换险资吗
  • 研发费用的范围包括哪些
  • 信息采集需要填写不动产权证书号吗
  • 注册资本在十年后怎么办
  • 库存现金银行存款用什么凭证
  • 开承兑需要多少手续费
  • 阶段性减免社保费政策期限延长
  • 股权转让低于净资产的税怎么算
  • 以前年度损益调整在利润表中怎么填
  • 个贷系统平账专户怎么做账
  • 新会计准则适用企业
  • 客户罚款员工承担
  • 法人转移公司资产怎么办
  • 其他应付款个人往来的涉税风险
  • 企业所得税国税地税怎么分
  • 股权变更产生的税费
  • 如何确定开票内容
  • 长期股权投资的交易费用计入哪里
  • Windows Vista和Windows 7对比
  • bios如何设置关机键开机
  • linux emac
  • shell中break和continue
  • cocos2dx引擎优化
  • Android使用opencv处理图片灰度
  • js tab切换
  • activity启动原理
  • jquery访问本地html
  • 一般纳税人简易征收会计分录
  • 山东税务申报如何网上申报
  • 工本费每月都扣?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设