位置: 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 转载请保留说明!

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

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

  • 史上最全最详细的APP推广渠道和策划方案(最详细的)

    史上最全最详细的APP推广渠道和策划方案(最详细的)

  • 索尼dsc t3说明书(索尼dsc tx66)(sony dsc-t3)

    索尼dsc t3说明书(索尼dsc tx66)(sony dsc-t3)

  • 华为watchfitnew有gps吗(华为watchfitnew有独立GPS吗)

    华为watchfitnew有gps吗(华为watchfitnew有独立GPS吗)

  • 中国石油加油卡怎么查询余额(中国石油加油卡可以退款吗?)

    中国石油加油卡怎么查询余额(中国石油加油卡可以退款吗?)

  • ipad2021怎么快速截屏(苹果ipad怎么变快)

    ipad2021怎么快速截屏(苹果ipad怎么变快)

  • 微信朋友圈一条横线代表什么意思(微信朋友圈一条线中间一个月亮)

    微信朋友圈一条横线代表什么意思(微信朋友圈一条线中间一个月亮)

  • 酷狗彩铃要钱吗(酷狗里面的彩铃要钱吗)

    酷狗彩铃要钱吗(酷狗里面的彩铃要钱吗)

  • 微信视频声音听不清(微信看视频没声音是怎么回事)

    微信视频声音听不清(微信看视频没声音是怎么回事)

  • 汉字的机内码和国标码的差别(汉字的机内码和汉字的国标码是一种代码的两种名称)

    汉字的机内码和国标码的差别(汉字的机内码和汉字的国标码是一种代码的两种名称)

  • lite是青春版吗(华为lite青春版)

    lite是青春版吗(华为lite青春版)

  • 计算机网络物理安全策略是指(计算机网络物理层特性)

    计算机网络物理安全策略是指(计算机网络物理层特性)

  • 荣耀al10什么型号(华为荣耀al10价格是多少钱)

    荣耀al10什么型号(华为荣耀al10价格是多少钱)

  • 抖音消息订阅要钱吗(抖音订阅消息有必要打开嘛)

    抖音消息订阅要钱吗(抖音订阅消息有必要打开嘛)

  • 耳机转换器怎么用(耳机转换器怎么使用教程)

    耳机转换器怎么用(耳机转换器怎么使用教程)

  • wps文字筛选重复内容(wps2019筛选重复数据)

    wps文字筛选重复内容(wps2019筛选重复数据)

  • iphone11关机闹钟会响吗(苹果11关机闹钟不会响)

    iphone11关机闹钟会响吗(苹果11关机闹钟不会响)

  • vivoy5s是什么处理器(这个手机是vivo y5s吗?)

    vivoy5s是什么处理器(这个手机是vivo y5s吗?)

  • 怎么解除qq登录上限(怎么解除qq登录保护)

    怎么解除qq登录上限(怎么解除qq登录保护)

  • 小米9怎么关闭锁屏通知亮屏(小米9怎么关闭广告推送)

    小米9怎么关闭锁屏通知亮屏(小米9怎么关闭广告推送)

  • oppor17投屏功能怎么用(oppor17手机投射屏幕教程)

    oppor17投屏功能怎么用(oppor17手机投射屏幕教程)

  • ios13与ios13.1的区别(ios13.3和13.7)

    ios13与ios13.1的区别(ios13.3和13.7)

  • 号码变空号了怎么恢复(号码变空号了怎么恢复卡号)

    号码变空号了怎么恢复(号码变空号了怎么恢复卡号)

  • 怪兽充电没地方归还怎么办(怪兽充电宝最近站点)

    怪兽充电没地方归还怎么办(怪兽充电宝最近站点)

  • 虎扑怎么升级(虎扑怎么升级账号)

    虎扑怎么升级(虎扑怎么升级账号)

  • 李玫瑾微信公众号多少(李玫瑾微信公众号怎么关注)

    李玫瑾微信公众号多少(李玫瑾微信公众号怎么关注)

  • 如何获得一个QQ邮箱(如何获得一个全数字的车牌)

    如何获得一个QQ邮箱(如何获得一个全数字的车牌)

  • 苹果8pnfc功能在哪里打开(苹果8pnfc功能在哪里开启)

    苹果8pnfc功能在哪里打开(苹果8pnfc功能在哪里开启)

  • 华为p10来电背景设置(华为手机来电显示背景)

    华为p10来电背景设置(华为手机来电显示背景)

  • Vue前端:几种搜索框功能实现(vue.js前端)

    Vue前端:几种搜索框功能实现(vue.js前端)

  • 增值税发票平台怎么下载已认证发票
  • 借款利息收入是企业收入吗
  • 什么是消费税?特征有哪些
  • 同一笔业务可以开多张发票吗
  • 进项税超期怎么办
  • 可税前扣除的工资
  • 资产减值损失转回的账务处理
  • 免费的产品
  • 跨年的预付账款如何冲销
  • 建设单位收到施工承包单位的单位工程验收申请后应组织
  • 酒店会计账务处理及税务申报
  • 本年已预缴所得税
  • 印花税减半征收会计分录怎么做
  • 净资产收益率怎么求
  • 抵扣进项税有期限吗
  • 建筑工地伙食费会计分录
  • iphone7plus怎么设置5g网络
  • acs_log是什么文件
  • mac废纸篓立即删除和清倒
  • bios boot设置
  • session失效的方法
  • php的file函数
  • 重装系统后软件打不开
  • 哪些行业可以简易征收增值税
  • 已经认证抵扣的发票,发生冲红,要怎么处理
  • 小规模纳税人进口增值税怎么处理
  • 应交税金的含义
  • 业务招待费如何进行纳税调整
  • 酒店的原材料和包装
  • php遍历目录
  • 危废处理需要哪些手续
  • python打印type
  • 建筑企业其他应付款
  • vue组件教程
  • 在税务局怎么查补缴的社保
  • 购置固定资产支付的现金属于投资活动产生的现金流量吗
  • 暂估库存商品计算怎么算
  • 按月计提固定资产折旧算收入吗
  • python3.9怎么删除
  • php 迭代器
  • 现金发放工资会计科目怎么写
  • 差额征税可以开专票抵扣吗
  • 公司贷款谁签字
  • 完税证明可以直接做账吗
  • 什么是ad域服务
  • 增值税减免税申报表
  • 亏损企业研发费用必须加计扣除吗
  • 小规模纳税人代账费用
  • 销售折扣与折让在财务报表哪里
  • 先确认收入后开票怎么做分录
  • 开票方没有缴纳增值税
  • 公司收到个人转账收入
  • 电子发票不小心删掉了怎么办
  • 用友有审核权限审核不了
  • 其他综合收益属于什么科目借贷
  • 企业实缴资本如何查
  • 融资租赁可以折旧吗
  • 企业应如何正确经营
  • 启用账簿时应在账簿上签名或盖章的是
  • xp电脑如何在网页打开
  • crack.exe是什么意思
  • 键盘设施
  • linux修改ulimit立即生效
  • explorer.exe进程文件
  • win8.1企业版激活密钥最新
  • Mac如何使用Excel
  • macbook qq截图存在哪
  • WIN10系统英文怎么改中文?
  • windows聚焦失效
  • 如何修改windows密码策略
  • linux中xargs用法
  • JavaScript中常用的数据类型有
  • javascript定律
  • jquery获取button的value值
  • android app测试
  • jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
  • 国税局税务大厅电话
  • 辽宁房产税2021年新规定来了,自2021年1月28日起执行
  • 上海哪能玩
  • 北京一证通如何安装安全控件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设