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

这篇具有很好参考价值的文章主要介绍了Print.js实现打印pdf,HTML,图片(可设置样式可分页)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一.安装及引入Print.js

二.介绍

三.常用配置

四.具体使用


一.安装及引入Print.js

1.安装

npm install print-js --save
//or
yarn add print-js    

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

import printJS from 'print-js'

二.介绍

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

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

//pdf打印 传入PDF文档url
printJS('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。
header null     应用于页面顶部标题文本。
headerStyle 'font-weight: 300;' 应用于标题文本的可选标题样式。
maxWidth 800 最大文档宽度(像素)。
css null 这允许我们传递一个或多个css文件的url,应该应用到正在打印的html。Value可以是包含单个URL的字符串,也可以是包含多个URL的数组。
style null 这允许我们传递一个自定义样式的字符串,该字符串应应用于正在打印的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.toymoban.com/news/detail-457545.html

到了这里,关于Print.js实现打印pdf,HTML,图片(可设置样式可分页)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案

    要调用浏览器中的打印功能,并指定需要打印的内容为特定的DIV内的内容,你可以使用JavaScript来实现。下面是一种实现方法: 首先,在需要打印的DIV标签上添加一个唯一的ID属性,例如: 接下来,在JavaScript中使用 window.print() 方法来调用浏览器的打印功能,并指定打印的内容

    2024年02月13日
    浏览(61)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(下)

    在进入文章的正文之前,我们先一起了解一下关于 CSDN 今年的 1024 程序员节。与此同时这也是我在 CSDN 参与的第二个 1024 程序员节日,转眼间也快写博客两年时间,去年很遗憾没有去到深圳(疫情原因)线下参加这个有趣而充实的峰会。今年没有特殊情况的话一定会如约而至

    2024年02月06日
    浏览(52)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)

    今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的使用,以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联

    2024年02月06日
    浏览(46)
  • window.print() 前端实现网页打印详解

    目录 前言  一、print()方法  二、打印样式 2.1使用打印样式表 2.2使用媒介查询 2.3内联样式使用media属性 2.4在css中使用@import引入打印样式表 三、打印指定区域部分内容 3.1方法一 3.2方法二 3.3方法三 四、强制插入分页 4.1page-break-before(指定元素前添加分页符) 4.2page-break-afte

    2024年02月02日
    浏览(36)
  • vue-print 实现打印功能

    一、安装 1. Vue2 2. Vue3 二、基本使用 1. 直接打印页面HTML 1)方法 ① 给要打印的部分设置一个 id ② 在打印按钮中添加 v-print=\\\"\\\'#id名\\\'\\\" 2)代码(以表格为例) 2. 个性化设置 1)方法 打印按钮的 v-print 绑定一个对象 2)代码 3)效果展示 ① 预览工具 3. 打印URL 1)方法 ① 给 打印

    2024年02月02日
    浏览(42)
  • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

    一、背景介绍 ​ 当我们在不想改变后端代码的同时想是纯html页面导出PDF,那么(html2canvas+jspdf)就是无疑最好的选择,导出时它不占用我们服务器的资源,而是由用户本地自行执行js文件下载PDF,不占用我们系统的带宽,所以这无非是最好的选择方式。 二、疑问 1、为什么要

    2024年01月23日
    浏览(59)
  • vue3-print-nb 实现页面打印(含分页打印)

    全局引入 局部引入 官网地址: https://github.com/Power-kxLee/vue3-print-nb 官网有详细介绍 全页面打印 局部打印 被打印的区域需要被渲染出来,隐藏的元素不能打印 分页打印

    2024年02月09日
    浏览(47)
  • 【Java】itext 实现 html根据模板生成pdf 中文不显示/图片不显示问题解决

    工作中需要使用生成pdf记录,选取使用的是itext 生成 pdf方式。分享下实现方式及遇到的问题。 这里随便找个html课程表作为示例,添加了几张图片为了展示图片转pdf功能。 一:引入jar包 二:导入ftl文件 这块使用的是html语法,将文件后缀名改为ftl即可,在需要参数的地方通过

    2024年02月05日
    浏览(46)
  • 批量打印-----jsPDF将图片转为pdf,并合并pdf

    安装依赖并引入 注意一、 使用jspdf将图片(jpg/jpeg/png/bmp)转pdf(记为pdfA),得到的pdf(pdfA)和需要合并的pdf(记为pdfB)类型不一致,需要将pdfA转为pdfB类型,才能合并,使用arraybuffer转,具体如下 注意二、 jspdf 可转pdf的图片类型有jpg、jpeg、png、bpm, 不支持 tif 和 tiff 图片类

    2024年02月13日
    浏览(49)
  • vue 导出多页pdf, window.print()实现

    如果你对分页打印没思路,而网上的现成方案又不适合,不妨进来看看,也许会对你有帮助. 由于工作环境是局域网,对于插件的安装有限制,所以排除了jspdf + html2canvas的实现方式;采用window.print(),就会涉及到表格的截断、文本的截断等问题,而且需求要求每一页的pdf都有固

    2024年02月19日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包