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

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

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

  • 股东分红交税税率
  • 主营业务收入属于资产
  • 收到境外汇款怎么处理
  • 往来账审计存在问题及建议
  • 企业所得税税收优惠政策
  • 公司租车怎么抵税
  • 电子承兑汇票如何拆小
  • 资产评估机构可以评估土地吗
  • 房地产 结转
  • 委托贷款利息收入账务处理
  • 营改增后补缴营业税
  • 增值税开票流程图解
  • 个体户经营所得核定税率
  • 五月份开的发票但是七月冲红了七月增值税怎么报
  • 咨询费如何缴纳个税
  • 实收资本的期初余额在借方还是贷方
  • 代收代付业务怎么交税
  • 开发票货款未公对公转怎么做账
  • 费用发票可以抵扣吗
  • 电脑系统权限管理在哪里
  • SUSE Linux Enterprise Server 11 SP3安装教程详解
  • php环境配置教程Apace
  • 网页视频播放不流畅原因
  • 软件技术开发合同
  • 逾期未申报如何申报
  • 矿产资源补偿费是什么
  • 阿圭罗来自哪里
  • 火灾烧毁物品如何取证
  • 图片php格式怎么换成jpg
  • thinkphp curl
  • 【原创】基于JavaWeb的医院预约挂号系统(医院挂号管理系统毕业设计)
  • spring的配置文件中的内容
  • cvpr2020目标跟踪
  • df 命令执行显示不出来
  • vmstat命令 监视系统资源状态
  • ftp port命令
  • 收到银联代收短信
  • 营业执照筹建是做什么的
  • 业务预算包括直销费用吗
  • pythonjam怎么用
  • 应收账款让售会计怎么做
  • 加油发票怎么报税
  • 营业收入与利润总额的比值
  • 在MysQL数据库中,数据库文件的扩展包括
  • 技术转让费如何计算
  • 费用减少利润减少的情况
  • 增值税发票种类三种
  • 预提费用为什么是负债
  • 利息支出的纳税调整计算公式
  • 付国外客户佣金怎么代扣代缴增值税
  • 企业收到加盟费怎么开发票
  • 新注册企业实收资本没到账怎么处理
  • 无形资产减值损失计入管理费用
  • 融资租赁怎么开收据
  • 资产减值损失是借增贷减吗
  • 可转换债券转换时的会计处理
  • 通过MySQL优化Discuz!的热帖翻页的技巧
  • sqlserver优化的几种方法
  • 通用pe工具箱安装win7
  • centos 3
  • 在linux系统中创建文件的命令
  • mac中quick-cocos2dx-2.2.5+sublime text 2搭建lua的开发环境
  • XMLHttpRequest Level 2 使用指南
  • python中用input()函数接收到的数据为
  • rsync include-from
  • node.js异步编程
  • js处理时间
  • jquery.filedownload.js
  • jquery绑定click的方法有几种
  • 全国增值税务查询官网
  • 中国税务定额发票怎么开
  • 南阳市税务稽查局举报电话
  • 浙江省国家电子税务局官网登录
  • 朝阳区地方税务局官网
  • 家庭农场有什么用途
  • 商铺缴纳契税需要复印件吗
  • 企业所得税的纳税期限按什么计征
  • 税务局调查巡查政策依据
  • 乌鲁木齐市公立幼儿园有哪些
  • 个税3月份申报2月的个税?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设