vue实现打印指定div的功能

已于 2023-08-22 15:30:09 修改
阅读量405 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
于 2023-08-22 15:29:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52115201/article/details/132428958
版权 
<div v-if="IsPrint" style="margin: 0 auto;" class="print" v-html="printCode" ref="print"></div>
<el-button @click="printPage" >打印</el-button>


printPage() {
        const printContent = this.$refs.print;
        const printWindow = window.open('', '_blank');

        const htmlContent = `
          <html>
            <head>
              <title>打印11</title>
              <style>
                @media print {
                  /* 打印页的CSS样式 */
                  * {
                    padding: 0;
                    margin: 0;
                  }

                  ul {
                    text-decoration: none;
                    list-style-type: none;
                    text-decoration: underline;
                    font-weight: bold;
                  }
                }
              </style>
            </head>
            <body>
              ${printContent.innerHTML}
            </body>
          </html>
        `;
        
        printWindow.document.write(htmlContent);
        printWindow.document.close();

        printWindow.onload = () => {
          printWindow.print();
          printWindow.close();
        };
     },

云白冰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现打印功能的两种方法
10-18
主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
vue实现div单选多选功能
01-19
vue实现div单选多选功能，供大家参考，具体内容如下 单选 单选： 多选： 单选功能 DOM层： <div class=labeloption class={checked:ageActive click=changeStatus(11)>0-16岁</div> <div class=labeloption ...
vue项目实现前端打印功能
千里之行，始于足下！
12-31 7434
一、直接使用window自带的打印功能： window.print() <template> <div> <p>点击下面的按钮，可将div里的内容区域进行打印</p> <div id="printDiv"> <p>打印内容 </p> <p>打印内容 </p> <p>打印内容 </p> <p>打印内
【vue】实现打印功能_vue 打印
最新发布
2401_84413010的博客
05-01 1042
（4）打印最好使用原生table标签，使用其他ui框架会出现很大的样式问题，使用原生table表格要自己重写表格边框，不然会出现表格边框很粗的情况，预览时看不出来，打印就很明显。在使用了单元格合并也会出现表格边框有的粗有的细的情况，目前还在研究如何解决。（2）css设置打印时强制分页，使用这个属性，该div的以后的内容就会在打印时分页（此属性在div display属性为flex时无效，使用了浮动float时也会无效）【1】把官方提供的LodopFuncs.js文件保存到项目某个目录下。
VUE ---- 利用vue-print-nb实现打印功能
热门推荐
LizequaNNN的博客
01-12 3万+
VUE ---- 利用vue-print-nb实现打印功能 一、安装vue-print-nb 二、引入Vue项目 三、使用说明
VUE实现局部DIV打印思路
acheng
04-02 766
要实现DIV局部打印，可以使用Vue组件中的$refs属性和window.print()方法。1. 在需要打印的DIV中添加一个ref属性，在Vue组件中引用该DIV。2. 在Vue组件中添加一个打印按钮，并使用@click事件绑定一个打印方法。3. 在打印方法中，使用$refs属性获取需要打印的DIV，并将其内容复制到一个新的窗口中。4. 最后，调用window.print()方法打印新窗口中的内容。
【Vue】Vue 使用 Print.js 打印div（选中区域的html）
蓝胖子的博客
02-23 1593
【Vue】Vue 使用 Print.js 打印div（选中区域的html）
vue 项目 打印, 要求 只打印div里面的内容
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
02-12 294
vue 项目 打印, 要求 只打印div里面的内容
vue 打印指定的内容
m0_61828394的博客
06-05 906
//试过几种方法都有网址、日期等所以还是选择了vue-easy-printnpm install vue-easy-print --save要打印的页面引入 import vueEasyPrint from "vue-easy-print"组件注册components: {vueEasyPrint,},使用 //打印内容
vue项目 打印页面中指定div中内容
SHERLOCK_96的博客
07-01 1670
//安装（命令行） npm install vue-print-nb --save //main.js中引入 import Print from 'vue-print-nb' Vue.use(Print) //vue文件 <el-button v-print="`#print`">打印</el-button> <div id="#print">需要打印的内容</div> ...
vue中使用vue-print.js实现多页打印
10-15
主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue实现浏览器打印功能的代码
10-15
主要介绍了Vue实现浏览器打印功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
打印DIV的内容
p15097962069的博客
06-30 773
什么是打印DIV内容的最佳方式？
Vue中打印网页的指定部分的几种方法
对啊我是太阳啊的博客
10-28 6029
楔子 这里是以下会用到的一些知识和说明 可以在GitHub上下载打印插件，但是自己写更简单，所以我就自己写了 本例为打印网页上的一个表格 window.print()打印的是整个网页的HTML内容，不包括CSS @media print{ ... }可以设置打印时样式 正文 网页效果： 目标：右键点击打印按钮时能打印表格，忽略下方的文字和图片，并且保留样式 思路：点击打印按钮时，...
「Vue3架构」Vue3实现区域预览和打印功能
AIGC大前端小王子
02-22 444
本文主要介绍Vue3实现区域预览和打印功能。
vue3后台管理实现局部打印功能
dsadada23的博客
05-07 964
最近在做一个后台管理系统，有个模块需要用到打印功能，想着直接使用浏览器自带的打印功能 ，也就是。，但是因为功能有局限性，会把整张网页都打印出来，而且我还需要保留原有的样式。我这里的js用的是vue3组合式setup语法糖的写法。
vue 打印区域内容 vue-print-nb
zhufan2333的博客
10-13 572
一、安装依赖：npm install vue-print-nb --save，并且在main.js中引入。在全局样式中，新增标签，添加打印时才生效的样式。三、在组件的打印按钮标签上使用指令 v-print="print", 其中print是配置对象。二、在组件需要打印的区域元素标签上加 id="printArea"1、打印过滤（隐藏打印区域不需要打印的内容）使用vue-print-nb实现打印功能。四、定义print配置对象。
vue用vue-print-nb实现打印功能
03-07
Vue-Print-NB是一个基于Vue.js的打印插件，它可以帮助我们在Vue项目中实现打印功能。使用Vue-Print-NB，我们可以轻松地将指定的DOM元素打印成PDF或者图片格式。 要使用Vue-Print-NB，首先需要安装该插件。可以通过npm或者yarn进行安装，具体命令如下： ``` npm install vue-print-nb ``` 或者 ``` yarn add vue-print-nb ``` 安装完成后，在Vue项目的入口文件中引入并注册该插件： ```javascript import Vue from 'vue' import VuePrintNB from 'vue-print-nb' Vue.use(VuePrintNB) ``` 接下来，在需要打印的组件中，使用`v-print`指令来标记需要打印的DOM元素。例如： ```html <template> <div> <div v-print> <!-- 需要打印的内容 --> </div> <button @click="print">打印</button> </div> </template> <script> export default { methods: { print() { this.$print() } } } </script> ``` 在上面的例子中，我们使用`v-print`指令标记了需要打印的内容，然后在按钮的点击事件中调用`this.$print()`方法来触发打印操作。 需要注意的是，Vue-Print-NB还提供了一些配置选项，可以通过传递参数给`v-print`指令来进行配置。例如，可以设置打印的页面标题、打印的方向等。具体的配置选项可以参考Vue-Print-NB的文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值