vue 打印组件 print-js

已于 2023-05-19 15:17:14 修改
阅读量423 收藏 3
点赞数
文章标签： vue.js javascript 前端
于 2023-05-19 15:14:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44024168/article/details/130767263
版权
文章介绍了如何使用print-js这个JavaScript插件来实现网页内容的打印。首先，通过npm安装print-js，然后在项目中导入。接着，展示了调用printJS函数的详细参数，包括打印区域、类型、表头、样式等，强调了如何处理CSS样式和忽略特定元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果预览

在这里插入图片描述

安装插件

npm install print-js

引入

import printJS from 'print-js'

食用方法

    handlePrintf(params) {
      printJS({
        printable: params.printable, // '打印区域', // 标签元素id
        type: params.type || 'html',
        header: "表头", // '表单',
        targetStyles: ['*'],
        style: printfStyle(), // 打印的内容是没有css样式的，所以此处需要string类型的css样式，必须是css，因为识别不了less
        ignoreElements: params.ignore || [], // ['no-print']
        properties: params.properties || null,
        scanStyles: false
      })
    },

在这里插入图片描述

小壮哥哥
关注
Vue使用PrintJS实现页面打印功能
m0_72416767的博客
10-26 5142
收到一个需求,要求实现 拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能。实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内容变成pdf并打印。然后百度了一下发现百度上给出的解决方案并不够具体,很容易踩坑出现各种奇怪的错误,于是就将本人的踩坑解决方案以及思路都记录下来。
如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印
技小白的博客
06-14 6693
在前端开发中，经常需要打印页面的特定部分，比如客户列表或商品详情页。要快速实现这些功能，可以使用 vue3-print-nb 插件。它通过对 DOM 元素的操作和 CSS 样式的处理，轻松实现页面内容的打印功能。
vue使用打印组件print-js
qq_38389533的博客
08-31 1053
vue使用打印组件print-js
Vue项目实现打印指定区域的功能
最新发布
m0_56991378的博客
04-11 472
本文采用vue-print-nb插件实现打印指定区域的功能。
vue使用print.js插件完成打印功能
weixin_43824675的博客
04-01 4501
vue使用print.js插件完成打印功能 print.js const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print'...
【Vue】使用print.js插件实现打印预览功能，超简单
热门推荐
weixin_50863323的博客
08-08 1万+
【Vue】使用print.js插件实现打印预览功能，超简单
vue+print-js页面打印功能实现
cassieyiran的博客
05-15 883
今日有个需求要求点击页面实现一个打印功能，翻看了资料，总结下。对比使用print-js比较方便。第二布 全局注册或者单个页面注册。
vue 使用 PrintJs 实现打印pdf效果
王二的博客
03-08 8179
Print.js主要是为了帮助我们直接在应用程序中打印PDF文件，而无需离开界面，并且不使用嵌入。对于用户不需要打开或下载PDF文件的特殊情况，他们只需要打印它们。例如，当用户请求打印在服务器端生成的报告时，这种方法就很有用。这些报告将以PDF文件的形式发回。在打印这些文件之前不需要打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法PDF文件必须从托管您的应用的同一域提供。Print.js使用iframe在打印之前加载文件，因此，它受到同源策略的限制。
vue3使用print-template生成pdfDemo
08-18
开发者可能创建了一个或多个Vue组件来展示要转换为PDF的内容，并调用`print-template`库的API来实现打印功能。可能还会有专门的`pdfService`服务，负责处理PDF生成的逻辑，例如设置页面大小、边距、导出选项等。 `...
vue中使用vue-print.js实现多页打印
11-21
在Vue组件的`methods`对象中，定义`printContext`方法来调用打印功能： ```javascript methods: { printContext () { // 方法1：通过添加no-print样式类来隐藏不需要打印的内容 this.$print(this.$refs.print) ...
图片地址生成二维码、vue-print-nb打印插件
高艳艳的博客！
04-26 371
【代码】图片地址生成二维码。
vue打印插件使用
11-26
vue打印插件使用 第一步: npm install vue-easy-print --save 第二步，在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: slot-scope func.getChineseNumber接收到的方法是一个将金额转换成中文的 配置props参数 // 针对分页表格模式：末尾空白行插入 spaceRow: { type:Boolean, default:false, }, // 针对分页表格模式：传入的打印数据。 tableData:{ type:Object, default() { return undefined } }, // 是否显示表格 tableShow:{ type:Boolean, default:false }, // 每页多少行 onePageRow: { type:Number, default:5, }, // 复制打印页面前调用的钩子 beforeCopy:Function, // 打印页面前调用的钩子 beforePrint:Function,
Vue打印组件
andyliu198571的博客
10-23 2029
top: 0;这些样式可以放在全局样式表中，或者作为内联样式添加到要打印的元素中。以上就是如何在Vue.js项目中使用print-js来实现打印功能的基本指南。根据你的具体需求，你可以进一步探索print-js提供的更多选项和配置。
vue使用printJs实现前端打印,以及打印分页实现
weixin_41978174的博客
07-24 968
我的需求为将表格打印出来,并且超过分页数进行分页展示以下内容参考了其他博主的实现方法,仅供参考。
printjs 在vue中的使用
hjh15827475896的博客
03-12 898
今天遇到项目中的一个功能， 要求在后台管理端打印一下书信，单纯的打印书信是小事，关建是信纸是图案是自定义的，用户上传一个图片做为信纸的背景图所以我们找到了 print-js 插件。
Vue使用printjs组件打印页面
qq_50661854的博客
03-24 1363
Vue使用print-js和html2canvas组件打印自动分页
vue 使用print-js
黑玫瑰
06-29 6896
前言 只要有软件的开发就会有管理后台的开发，然而就现在很多管理后台都是需要打印功能的，其实也有那种前端生成pdf的需求，但总的来说，个人还是觉得用打印里面的“另存为PDF”比较香。 我这里使用的是print-js，官网 优点：可打印多种格式内容（pdf、json、html、image），默认类型为pdf。打印json时可以添加表头。打印html页时可以继承原有页面的样式，可以局部打印，过滤掉要打印的元素。 那么打印怎么实现呢？请接着往下看 安装 npm install print-js --save
Vue中封装打印组件包括基本信息、表格用途出库单、入库单、请购单等单据
ajiuyuan的博客
02-03 2595
1、我们在工作中，在中后台系统应用中，经常会遇到打印的问题。2、产品需求将列表详情数据能够打印生产单据，包括列表详情的所有数据。3、通常我们可以通过接口拿到一定格式的JSON数据。打印组件，总的思想就是把JSON数据通过Vue渲染成HTML，然后把指定id的标签打印出来。封装组件时遇到的问题：1、elementUI表格如果直接使用，浏览器打印时有的CSS会渲染不出来，自己重新写了表格的CSS和HTML。
vue2 使用print.js实现打印功能
MyOxygen的博客
07-05 8774
打印时发现表格显示不全，需手动调整打印设置，在右边的更多设置-缩放，选择自定义，缩放至合适的大小。传入自定义样式的字符串，作用于被打印的HTML标签上。自定义页面上所有元素的样式，在打印时生效。可以通过给打印区域设置class类名或id值，也可以使用ref获取DOM节点。打印JSON时传入的表头名称，要和JSON中的键值对的键保持一致。局部引入print-js，指定不同的打印类型。记录print.js实现打印功能的过程。打印JSON时，表格的自定义样式。打印JSON时，表头的自定义样式。
print-js打印
03-13
<think>好的，用户想了解如何使用print-js进行打印操作。首先，我需要回忆一下print-js的基本用法和常见应用场景。print-js是一个轻量级的JavaScript库，主要用于在网页中快速实现打印功能，支持PDF、HTML、JSON等多种格式。用户可能需要在项目中实现打印表格、图片或者特定区域的内容，所以应该涵盖这些方面的示例。 接下来，我需要确保回答的结构清晰，分步骤说明安装、基本使用和不同格式的处理方法。根据用户提供的示例，他们可能希望看到代码示例和常见问题的解决方法，比如样式调整或表格打印不全的问题。同时，用户提供的引用内容提到了vue3-print-nb和element table的问题，虽然用户现在询问的是print-js，但可能需要参考类似的问题处理方式，比如调整元素样式或使用回调函数。 需要注意用户提到的系统级指令，比如正确使用LaTeX格式，但在这个问题中可能不涉及数学公式，所以可能不需要应用。另外，需要生成相关问题，并确保回答真实可靠，引用相关的资料。用户提供的引用[2]提到处理表格打印不全的方法，这可能对print-js同样适用，比如在打印前调整元素的宽度或样式。 现在需要组织回答内容，首先介绍print-js的基本信息，然后分步骤说明安装、基本使用，针对不同格式（HTML、JSON、PDF）给出示例代码。接着，可能需要提到如何处理常见问题，比如样式问题或表格布局，可以参考引用中的方法，如调整CSS或使用钩子函数。最后生成相关问题，帮助用户进一步探索。 需要确保回答的语言简洁明了，代码示例正确，并且覆盖用户可能的需求点。同时，检查是否有需要引用的地方，比如提到处理表格问题时可以引用用户提供的引用[2]，但需要注意是否相关。由于print-js和vue3-print-nb是不同的库，处理方法可能不同，但调整样式的思路类似，可以适当提及。</think>### 如何使用 print-js 进行打印操作 print-js 是一个轻量级 JavaScript 库，支持打印 HTML 元素、JSON 数据、PDF 文件等。以下是具体使用方法： --- #### 1. **安装与引入** - **通过 CDN 引入**： ```html <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script> <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"> ``` - **通过 npm 安装**： ```bash npm install print-js --save ``` 在 Vue/React 中引入： ```javascript import printJS from 'print-js'; ``` --- #### 2. **基础使用** ##### (1) 打印 HTML 内容 指定需要打印的 DOM 元素 ID： ```javascript printJS({ printable: 'elementId', // 目标元素的 ID type: 'html', css: ['/path/to/style.css'], // 自定义打印样式 scanStyles: false // 是否扫描页面原有样式 }); ``` ##### (2) 打印 JSON 数据 自动生成表格并打印： ```javascript const data = [ { name: 'Alice', age: 28 }, { name: 'Bob', age: 32 } ]; printJS({ printable: data, properties: ['name', 'age'], // 定义表头 type: 'json', header: '用户列表' // 表格标题 }); ``` ##### (3) 打印 PDF 文件 直接打印远程 PDF 文件： ```javascript printJS({ printable: 'https://example.com/document.pdf', type: 'pdf', showModal: true // 显示打印预览弹窗 }); ``` --- #### 3. **常见问题解决** - **样式丢失问题**：通过 `css` 参数强制指定打印样式，或在媒体查询中定义 `@media print` 样式[^2]。 - **表格打印不全**：在打印前动态调整表格列宽，例如： ```javascript printJS({ printable: 'tableId', type: 'html', onLoadingStart: () => { document.querySelectorAll('table col').forEach(col => col.style.width = '100%'); } }); ``` - **图片模糊**：确保图片源为高分辨率，或使用 `imageStyle` 参数设置尺寸： ```javascript printJS({ printable: 'imageId', type: 'html', imageStyle: 'width:100%;height:auto;' }); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值