vue-print-nb实现页面打印,如何隐藏打印打印区域中的某个div？

最新推荐文章于 2024-12-25 08:52:05 发布

HainesFreeman

最新推荐文章于 2024-12-25 08:52:05 发布

阅读量2.6k

点赞数

分类专栏： vue 业务文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/weixin_41829196/article/details/127419727

版权

vue 同时被 2 个专栏收录

119 篇文章

订阅专栏

业务

67 篇文章

订阅专栏

问题：

设置好打印区域后，如何隐藏打印区域中的某个div呢？

解决：

1、设置css类名

@media print {
  .hidden{
      display: none;
  }
}

2、div上面设置这个css类名即可

<el-button type="primary" class="hidden" icon="el-icon-printer" v-print="printObj">打印</el-button>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HainesFreeman

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

打印页面时隐藏HTML div

心火灬的博客

03-19

988

添加print.css到你的页面中，您可以隐藏所有你不想要的元素要打印 <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 媒体=“打印”属性告诉浏览器使用特定的CSS文件。在该文件中，你可以有 .admindetails{ display:none; } 您可以使用该分区的CSS设置为display: none如下： @media print { div.do-not-

vue3使用vue3-print-nb时想让一些内容不显示在打印预览里面

liuli0927的博客

04-11

1271

【代码】vue3使用vue3-print-nb时想让一些内容不显示在打印预览里面。

参与评论您还未登录，请先登录后发表或查看评论

vue-print-nb实现页面打印,如何隐藏打印打印区域

flym_的博客

12-05

2301

问题: 我们在使用vue-print-nb实现页面打印时，有些dom元素是不需要打印出来的，我们可以点击打印按钮时，再打印之前来做些操作就可以实现需求了，具体代码如下。

vue-print-nb如何打印隐藏dom

shao.zq的博客

10-12

4453

问题描述目前有一个tabs页面，每个里面是不同的表单，因为通过v-if实现的显隐控制，需求要求点击打印后将全部tabs的内容打印，每个tabs页面是一个独立的页。功能实现 1.新建一个div将tabs全部渲染 2.通过隐藏实现div不可见 3.通过css控制每个tabs是一个单独的A4纸。具体代码 HTML代码  <button v-print="'#objectDialogPrintWarp'"></button>

vue打印指定DOM节点和打印隐藏的dom节点

weixin_43541368的博客

05-06

4016

使用jQuery.print.js和jquery打印页面的指定DOM节点和隐藏的DOM节点

【功能实现】Vue项目实现打印功能 - vue-print-nb使用指南

12-25

1671

<button>打印</button></div></div><table></tr></table></div><p>打印时间：{{printTime}}</p></div></div>data() {return {company: '示例公司',data: [{ name: '项目1', value: '内容1' },{ name: '项目2', value: '内容2' }],

vue-print-nb实现页面打印

xin_666的博客

02-11

3807

1、安装及配置安装依赖：npm install vue-print-nb --save 在main.js中引入

使用vue-print-nb实现页面打印

luwen63257270的博客

04-17

2324

步骤1. 安装插件vue-print-nb $ yarn add vue-print-nb 步骤2. 在main.js中导入并注册 import Print from 'vue-print-nb' Vue.use(Print) 步骤3. 给要打印的盒子指定id <div id='printbox'> 步骤4. 使用v-print指令进行打印 <el-button v-print="{id:'printbox'}">打印</el-button> ...

前端开发之打印功的使用和实例（vue-print-nb）

m0_50207524的博客

11-17

1067

在平时开发中打印功能是很常见的功能，实现的方式也有很多，下面讲解通过插件来进行实现的方式该插件是通过节点进行打印可以实现分开打印不同的内容注意：vue2和vue3安装的版本是不同的。

vue结合vue-print-nb实现打印功能

weixin_45803033的博客

03-12

1622

安装vue-print-nb npm i vue-print-nb --save 在main.js文件中导入 import Print from 'vue-print-nb' Vue.use(Print); 使用使用id <template> <div> <button v-print="'#printcontent'">打印</button> <div>888</div> <div id="printco

Vue使用vue-print-nb打印，并去除页眉页脚，打开打印窗口自动打印

wujf90的博客

08-19

1万+

一、这次使用的是vue-print-nb插件完成打印的功能。借鉴链接：https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html 文档：https://www.npmjs.com/package/vue-print-nb#usage-method 使用方式安装 npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' Vue.us

vue 实现打印功能

qq_53489791的博客

12-27

5680

vue 打印

vue前端打印代码加遇到的问题

anwenagululu的博客

09-06

938

vue前端打印，打印预览时多一张空白页，希望在打印时显示 id="printContent" 的内容，但在组件引用时隐藏它，vue-print-nb，vue-print-nb-jeecg

vue中打印插件vue-print-nb(二)-实例之两种方法——安包之设置一个id和绑定一个对象 & 下载print.js之ref设置锚点

weixin_44867717的博客

12-04

3585

打印

vue项目中借助vue-print-nb插件实现打印

m0_57391092的博客

10-12

549

需求：打印页面部分内容插件原理：创建iframe，获取要打印的内容添加到iframe中，调用print()方法打印使用：一、安装插件 npm install vue-print-nb --save 二、页面上导入并注册 // 导入插件 import Print from "vue-print-nb"; export default { // 注册指令 directives: { Print, }, } 三、提供容器并添加id 四、给按钮添加v-print指令，并

vue3-print-nb 实现页面打印（含分页打印）

u013553807的博客

03-03

7530

html的打印

vue地址去掉 #

热门推荐

前端很忙

10-19

3万+

vue去掉#，vue地址#，vue路由#

vue-print-nb 实现页面打印（含分页打印）

GFing18的博客

07-05

1万+

vue-print-nb组件实现页面的打印

vue2 使用vue-print-nb组件打印div区域

12-19

Vue2 中，可以使用 `vue-print-nb` 这个第三方插件来实现页面部分区域的打印功能。`vue-print-nb` 允许你在 Vue 组件中轻松地生成预览和导出 PDF 版本，包括打印 HTML 区域。首先，你需要安装这个插件，可以通过 npm 或 yarn 安装： ```bash npm install vue-print-nb --save # 或者 yarn add vue-print-nb ``` 然后，在你的 Vue 文件中导入并注册该组件： ```javascript import { Printnb } from 'vue-print-nb'; export default { components: { Printnb, }, }; ``` 接下来，要在需要打印的 div 区域使用 `Printnb` 组件，并指定你要打印的内容： ```html <template> <div class="print-area"> <h1>这是一个需要打印的标题</h1> <p>{{ someContent }}</p>  <div v-if="showPrintArea" @click="printDiv"> <div ref="printDiv">点击这里打印这部分内容</div> </div> </div> </template> <script> export default { data() { return { showPrintArea: false, // 初始隐藏打印区域 someContent: "这是要打印的文字", }; }, methods: { printDiv() { this.showPrintArea = true; this.$refs.printDiv.print(); // 调用打印函数 } } }; </script> ``` 在这个例子中，当用户点击包含 `ref="printDiv"` 的元素时，会显示打印区域并触发打印操作。记得给 `.print-area` 添加 CSS 样式来调整打印布局。