软件教程 2025年08月6日
0 收藏 0 点赞 985 浏览 2596 个字
摘要 :

文章目录 第1步:安装printjs 第2步:导入printjs 第3步:使用printjs PS:printjs属性汇总 最近开发的页面统计报表部分突然说要有打印功能,那就只能加一个了,做的也……




  • 第1步:安装printjs
  • 第2步:导入printjs
  • 第3步:使用printjs
  • PS:printjs属性汇总

最近开发的页面统计报表部分突然说要有打印功能,那就只能加一个了,做的也比较简单,由于是使用vue开发的项目,需要打印统计页面局部表格内容,使用printjs非常方便就实现了,以下是相关简单的记录演示说明。

第1步:安装printjs

vue项目直接执行以下指令安装printjs插件

npm install print-js --save

第2步:导入printjs

接下来在main.js导入printjs,直接新增如下内容:

import print from \'print-js\'

第3步:使用printjs

在你需要打印的vue组件页面,比如我想打印一个表格,则在表格外部新增打印内容的div,给个id,然后新增个打印按钮,触发打印事件,最后写个js方法就行了,具体如下:

1)新增div打印内容

<div id=\"printJS-form\">
    <!-- 以下就是你想要打印的局部内容 -->
    <el-table>省略n行...</el-table>
</div>

2)新增打印按钮

<el-button  type=\"success\" icon=\"el-icon-printer\" @click=\"doPrint\">
   打印
</el-button>

3)新建打印方法

// 打印
doPrint() {
      printJS({
        printable:\'printJS-form\',
        type:\'html\',
        targetStyles:[\'*\'],
        maxWidth:1920,
      })
}

4)最后点击打印按钮,就可以实现类似如下效果:

vue使用printjs实现打印局部页面内容

PS:printjs属性汇总

最后贴上printjs的相关属性说明表格,可供扩展参考

参数 默认值 说明
printable null 文档源:pdf或图像url、html元素id或json数据对象。
type ‘pdf’ 可打印类型。可用的打印选项有:pdf、html、image、json和raw html。
header null 用于HTML、图像或JSON打印的可选标题。它将被放置在页面顶部。此属性将接受文本或原始HTML。
headerStyle ‘font-weight: 300;’ 要应用于标题文本的可选标题样式。
maxWidth 800 以像素为单位的最大文档宽度。根据需要更改此选项。打印HTML、图像或JSON时使用。
css null 这允许我们传递一个或多个css文件URL,这些URL应该应用于正在打印的html。值可以是具有单个URL的字符串,也可以是具有多个URL的数组。
style null 这允许我们传递一个带有自定义样式的字符串,该字符串应应用于正在打印的html。
scanStyles true 设置为false时,库将不会处理应用于正在打印的html的样式。使用css参数时很有用。
targetStyle null 默认情况下,在打印HTML元素时,库仅处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘pading-top’,’border-bottom’]
targetStyles null 不过,与“targetStyle”相同,它将处理任意范围的样式。例如:[‘border’,’padding’],将包括“border-bottom”、“bordertop”、“border-left”、“porder-refght”、“padding-top”等。您还可以传递[‘*’]来处理所有样式。
ignoreElements [ ] 接受打印父html元素时应忽略的html ID数组。
properties null 打印JSON时使用。这些是对象属性名称。
gridHeaderStyle ‘font-weight: bold;’ 打印JSON数据时网格头的可选样式。
gridStyle ‘border: 1px solid lightgray; margin-bottom: -1px;’ 打印JSON数据时网格行的可选样式。
repeatTableHeader true 打印JSON数据时使用。设置为false时,数据表标题将仅显示在第一页。
showModal null 启用此选项可在检索或处理大型PDF文件时显示用户反馈。
modalMessage ‘Retrieving Document…’ showModal设置为true时向用户显示的消息。
onLoadingStart null 加载PDF时要执行的函数
onLoadingEnd null 加载PDF后要执行的函数
documentTitle ‘Document’ 打印html、image或json时,这将显示为文档标题。
fallbackPrintable null 打印pdf时,如果浏览器不兼容(检查浏览器兼容性表),库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档,而不是传递给“可打印”的原始文档。如果在备用pdf文件中注入javascript,这可能会很有用。
onPdfOpen null 打印pdf时,如果浏览器不兼容(检查浏览器兼容性表),库将在新选项卡中打开pdf。可以在此处传递回调函数,当发生这种情况时将执行回调函数。在某些需要处理打印流、更新用户界面等的情况下,它可能很有用。
onPrintDialogClose null 浏览器打印对话框关闭后执行的回调函数。
onError error => throw error 发生错误时要执行的回调函数。
base64 false 打印作为base64数据传递的PDF文档时使用。
honorMarginPadding(弃用) true 这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很好,但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。
honorColor(弃用) false 要彩色打印文本,请将此属性设置为true。默认情况下,所有文本将以黑色打印。
font(弃用) ‘TimesNewRoman’ 打印HTML或JSON时使用的字体。
font_size(弃用) ’12pt’ 打印HTML或JSON时使用的字体大小。
imageStyle(弃用) ‘width:100%;’ 打印图像时使用。接受包含要应用于每个图像的自定义样式的字符串。

以上就是vue使用printjs实现打印局部页面内容的演示说明了,希望对你有帮助!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6197.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号