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

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

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

  • 2022网页设计趋势好的网站建设公司有大量的成功案例

    2022网页设计趋势好的网站建设公司有大量的成功案例

  • 电脑主机启动了但是显示器没反应(电脑主机)(电脑主机启动了但是显示器没反应)

    电脑主机启动了但是显示器没反应(电脑主机)(电脑主机启动了但是显示器没反应)

  • 苹果手机怎么设置来电铃声自定义(苹果手机怎么设置锁屏时间)

    苹果手机怎么设置来电铃声自定义(苹果手机怎么设置锁屏时间)

  • 魅族17屏幕是多大的(魅族17屏幕多少hz)

    魅族17屏幕是多大的(魅族17屏幕多少hz)

  • 小米日历怎么显示多少天后(小米日历怎么显示在桌面)

    小米日历怎么显示多少天后(小米日历怎么显示在桌面)

  • 小米打印机为啥连接不上(小米打印机为啥显示连不上互联网)

    小米打印机为啥连接不上(小米打印机为啥显示连不上互联网)

  • iphone8自动重启(iphone8自动重启怎么回事)

    iphone8自动重启(iphone8自动重启怎么回事)

  • pon灯常亮上不去网怎么办(pon灯一直闪解决方案)

    pon灯常亮上不去网怎么办(pon灯一直闪解决方案)

  • 兼容模式的坏处(兼容模式好吗)

    兼容模式的坏处(兼容模式好吗)

  • 此宝贝未发布手机端宝贝详情是什么意思(此宝贝未发布手机怎么办)

    此宝贝未发布手机端宝贝详情是什么意思(此宝贝未发布手机怎么办)

  • 苹果7plus支持无线充电吗(苹果7 plus带不带无线充电)

    苹果7plus支持无线充电吗(苹果7 plus带不带无线充电)

  • 苹果手机自带软件可以卸载吗(苹果手机自带软件哪些没有用可以删除?)

    苹果手机自带软件可以卸载吗(苹果手机自带软件哪些没有用可以删除?)

  • 淘宝提问在哪里看(淘宝里我的提问在哪)

    淘宝提问在哪里看(淘宝里我的提问在哪)

  • 华为nova5怎么隐藏应用(华为怎么隐藏手机软件nova5i)

    华为nova5怎么隐藏应用(华为怎么隐藏手机软件nova5i)

  • 抖音怎么添加特别关注(抖音怎么添加特效以后不显示)

    抖音怎么添加特别关注(抖音怎么添加特效以后不显示)

  • 抖音上的呼啦是什么软件(抖音上的呼啦是什么意思)

    抖音上的呼啦是什么软件(抖音上的呼啦是什么意思)

  • 为什么qq取消特别关心还是会响(为什么qq取消特别关心发消息还是有显示)

    为什么qq取消特别关心还是会响(为什么qq取消特别关心发消息还是有显示)

  • 怎么给微信头像加国旗(怎么给微信头像加字)

    怎么给微信头像加国旗(怎么给微信头像加字)

  • 抖音直播如何关闭礼物(抖音直播如何关闭同城不让同城人看到)

    抖音直播如何关闭礼物(抖音直播如何关闭同城不让同城人看到)

  • 一键换机微信聊天记录还有吗(一键换机微信聊天记录可以换到新手机么)

    一键换机微信聊天记录还有吗(一键换机微信聊天记录可以换到新手机么)

  • oppoa9怎么关闭运行程序(oppoa11x怎么关闭运行)

    oppoa9怎么关闭运行程序(oppoa11x怎么关闭运行)

  • 苹果手机出现蓝色方框如何取消(苹果手机出现蓝色移动框框咋办)

    苹果手机出现蓝色方框如何取消(苹果手机出现蓝色移动框框咋办)

  • 抖音怎么录制文字视频(抖音怎么录制文案)

    抖音怎么录制文字视频(抖音怎么录制文案)

  • 笔记本电源已接通未充电解决方法(惠普笔记本电源适配器)

    笔记本电源已接通未充电解决方法(惠普笔记本电源适配器)

  • uni-app 自定义下拉框(uniapp自定义下拉刷新上拉加载)

    uni-app 自定义下拉框(uniapp自定义下拉刷新上拉加载)

  • 应税销售收入是指什么
  • 小汽车属于固定资产的什么设备
  • 资金结存期末余额方向
  • 间接持股数怎么计算
  • 员工旅游费用可以税前扣除吗?
  • 招拍挂方式取得土地,应该取得土地后立项
  • 原材料计划成本和实际成本的区别
  • 房地产企业土地成本分摊方法
  • 换出资产为固定资产,差额计入
  • 来料加工复出口增值税政策
  • 供应商采购额变动原因有哪些
  • 董事费如何计算个人所得税
  • 实收资本印花税最新规定
  • 在建工程领用外购材料会计分录
  • 劳务费按次500元
  • 代扣代缴增值税计算公式
  • 长期股权投资计提减值准备
  • 污水处理增值税征收品目
  • 期货手续费会计分录
  • bios中关闭软盘
  • windows10如何调出虚拟键盘
  • window10切换win7
  • php缓存优化
  • 政府性基金收入来源
  • 如何在 Windows 11 上打开 APK 文件
  • PHP:mb_output_handler()的用法_mbstring函数
  • 境外资金购买境内物业
  • linux乱码怎么改
  • zendframework3中文手册
  • 废旧物资回收经营单位
  • 房产税城镇土地使用税税源信息采集
  • php图片库
  • python去掉文本的指定符号
  • 年度预算的意义
  • 金蝶kis的使用方法
  • 增值税专用发票电子版
  • 销售产品用什么词形容
  • python中如何创建文件
  • 购买一台电脑2400元贵吗
  • 新会计准则下的资产负债表
  • 计提提成是什么意思
  • 筹建期发生的费用会计分录
  • sql server怎么用sql语句创建数据库
  • 个人购销合同范本
  • 在建工程待摊支出是什么意思
  • 普通发票税额没有打印全可以用么
  • 会计中的明细科目是什么
  • 车辆保险费如何缴纳印花税的
  • 罚款支出算费用吗
  • 预付款预缴如何做账
  • 房地产开发企业分为几个等级
  • 单位保险柜里都放些什么
  • 收到股东投资如何做账
  • 银行利息为什么用红字
  • 先进先出法实际成本跟成本不一样吗
  • 幼儿园报税的基础是什么
  • mysqldumpslow
  • 如何删除win10系统
  • http500内部错误
  • window10预览在哪里找
  • win7升级win10收费吗
  • win10系统如何查找文件
  • 离线安装macos
  • win7打开文件总是询问
  • linux awk nr
  • 自定义ui界面
  • linux一共多少命令
  • perl怎么读取文件
  • javascript 数组
  • shell脚本中计算变量除法
  • 不通过肾门的结构都有什么
  • nodejs实战
  • python 生成器send
  • 安卓开发界面ui设计器
  • android_zh
  • python中set用法
  • 股权转让申报期限
  • 广告业发票税率是多少 可以抵扣多少
  • 电子税务局季度利润表本月数
  • 亳州自来水缴费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设