vue 使用print.js 打印文本,HTML元素,图片,PDF

最新推荐文章于 2025-09-22 11:00:04 发布
原创 最新推荐文章于 2025-09-22 11:00:04 发布 · 977 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #html

vue 使用print.js 打印文本,HTML元素,图片,PDF

  • 安装
npm install print-js --save
  • 示例
<template>
  <div class="print-example">
    <h2>Print.js 打印示例</h2>
    
    <!-- 打印区域 -->
    <div id="printableArea" class="printable-area">
      <h3>这是要打印的内容</h3>
      <p>这是一段示例文本，将会被打印出来。</p>
      <img src="https://picsum.photos/400/200" alt="示例图片" class="print-image">
      <table border="1" cellpadding="8" class="print-table">
最低0.47元/天 解锁文章
Vue3打印插件Print.js的使用
小马甲
01-09 4763
如何认识和快速上手 `Print.js`，我们可以从官网的内容开始阅读，在官网中有很详细的介绍和使用例子，虽然是英文版的。`Print.js` 打印插件包括了 `PDF` 打印、`HTML` 打印、`JSON` 打印、图像打印等。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
vue2 使用print.js实现打印功能
MyOxygen的博客
07-05 9237
打印时发现表格显示不全，需手动调整打印设置，在右边的更多设置-缩放，选择自定义，缩放至合适的大小。传入自定义样式的字符串，作用于被打印的HTML标签上。自定义页面上所有元素的样式，在打印时生效。可以通过给打印区域设置class类名或id值，也可以使用ref获取DOM节点。打印JSON时传入的表头名称，要和JSON中的键值对的键保持一致。局部引入print-js，指定不同的打印类型。记录print.js实现打印功能的过程。打印JSON时，表格的自定义样式。打印JSON时，表头的自定义样式。
print-JS打印插件设置字体大小不生效
最新发布
weixin_56385520的博客
09-22 303
我也查阅到有博主说在执行打印命令时在命令里添加font-size：''属性也能起到同样效果，这个我没验证，请自行尝试。会尝试包含所有样式，但对于一些复杂的布局或外部样式表，打印预览可能仍然与屏幕显示有细微差别。printJS打印插件非常便捷，但是涉及到自定义打印字体大小无法修改，且经常样式不生效。执行命令时加{targetStyles: ['*']}属性。font-size字体大小不生效则需要修改插件代码。我们按照此路径找到print.js文件。CSS 规则来优化打印效果。首先解决样式不生效问题。
vue print-js实现打印功能
weixin_46328739的博客
01-16 761
vue print-js实现打印功能。
printjs 在vue中的使用
hjh15827475896的博客
03-12 1024
今天遇到项目中的一个功能， 要求在后台管理端打印一下书信，单纯的打印书信是小事，关建是信纸是图案是自定义的，用户上传一个图片做为信纸的背景图所以我们找到了 print-js 插件。
vue使用print.js实现打印功能，以及添加打印机
成在坚持，贵在坚持
05-20 6694
print.js 一个javascript库，可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 安装print npm install print-js --save 将print.js放如src文件夹内 在main.js引用print import Print from './libs/Print/print' Vue.use(Print) print.js的代码 // 打印类属性、方法定义 /* eslint-disab
vue 使用print-js
黑玫瑰
06-29 6998
前言 只要有软件的开发就会有管理后台的开发，然而就现在很多管理后台都是需要打印功能的，其实也有那种前端生成pdf的需求，但总的来说，个人还是觉得用打印里面的“另存为PDF”比较香。 我这里使用的是print-js，官网 优点：可打印多种格式内容（pdf、json、html、image），默认类型为pdf。打印json时可以添加表头。打印html页时可以继承原有页面的样式，可以局部打印，过滤掉要打印的元素。 那么打印怎么实现呢？请接着往下看 安装 npm install print-js --save
Vue中使用vue-print.js实现多页打印的完整解决方案
`vue-print.js`（也称为`print.js`）是一个轻量级且广泛使用的JavaScript打印库，能够直接将DOM元素内容发送至浏览器的打印预览窗口。然而，默认版本在处理复杂结构或多页内容时存在局限性——尤其是当打印内容超过...
vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描
chengcheng9876的博客
04-18 5601
vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描
前台导出pdf经验汇总 （html2canvas.js和浏览器自带的打印功能-print.js）以及后台一些导出pdf的方法
Schaffer的博客
11-27 6927
项目导出pdf前台导出pdf的两种方式html2canvas.js & pdf.js简介使用问题及解决方法浏览器自带的打印功能 & print.js简介使用问题及解决方法后台输出pdf利用iText导出 前台导出pdf的两种方式 html2canvas.js & pdf.js 简介 我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。 由于html2
Vue使用Print.js
qq_33723794的博客
06-10 347
第一步 npm install print-js --save 第二步 import printJS from 'print-js'
在Vue项目中使用PrintJS实现打印功能
weixin_67093879的博客
07-28 813
PrintJS是一个轻量级JavaScript打印库，支持打印HTML元素、JSON数据和图片。通过简单安装（npm或yarn）后，可快速实现三种打印功能：1）打印指定HTML区域内容；2）将JSON数据转为表格打印；3）直接打印图片。库提供丰富的配置选项，包括保留样式、设置标题、表格样式等。使用时需注意元素ID唯一性、JSON属性匹配和图片URL可访问性，推荐使用targetStyles保留样式以获得更好的打印效果。
vue使用打印组件print-js
qq_38389533的博客
08-31 1150
vue使用打印组件print-js
vue实现打印功能Print.js
ma_pei的博客
09-23 1065
参考的地址： https://github.com/crabbly/Print.js https://printjs.crabbly.com/#documentation 项目中有用到打印功能，网上就找了print.js，具体操作步骤如下（也可以参考以上两个链接地址）： 1、通过 npm 安装： npm install print-js --save 2、将库导入到您的项目中： import printJS from ‘print-js’ 3、在需要打印的地方定义ID 4、后面直接调用就可以了，如图：
vue使用print.js打印插件
Fabricant的博客
08-06 1万+
任务：解决vue页面局部打印功能 print.js插件，可以打印 html、pdf、json数据 官网：https://printjs.crabbly.com/ 一个整理的很好的讲解:https://www.jianshu.com/p/bc079fbb20c7 一、步骤： 1.安装插件 npm install print-js --save 2.在需要打印的页面导入库 import print from 'print-js' 3.在vue文件中新建一个打印div盒子 ，设一个 id 值（printB
vue插件——vue-print-nb 实现打印功能
热门推荐
yehaocheng520的博客
02-26 1万+
vue插件——vue-print-nb 实现打印功能
打印并实现分页
qq_42882723的博客
07-21 874
print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) ===
vue项目使用Print.js插件实现PDF文件打印
tigerhhzz的博客
03-23 1万+
vue项目使用Print.js插件实现PDF文件打印
【VUE】vue使用print-js插件实现打印功能
踩坑日常和学习笔记
12-23 2760
1、安装 npm install print-js --save 或 yarn add print-js 2、页面引用 import print from 'print-js' 3、页面定义容器 <div id="printMe"> <!-- 要打印的内容 如二维码 --> <div id="qrCode" ref="qrCode" class="qrcode"></div> </div> <a-button type="primar
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码工人笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值