vue里面实现打印功能

最新推荐文章于 2024-05-30 16:57:19 发布

ThechosenProgrammer

最新推荐文章于 2024-05-30 16:57:19 发布

阅读量263

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gdhdhdhshs/article/details/127652030

版权

安装依赖


// vue3 安装
npm install vue3-print-nb
// 或
yarn add vue3-print-nb
 
// vue2 安装
npm install vue-print-nb
// 或
yarn add vue-print-nb

在mian.js引用

import Print from 'vue3-print-nb'
app.use(Print)

页面使用

<el-button type="danger" v-print="'print'">
            打印 
</el-button>
 <div id="print">
  模板内容
 </div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ThechosenProgrammer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue里面实现打印功能

【代码】vue里面实现打印功能。
复制链接

扫一扫

vue+element实现打印页面功能

10-16

主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

vue实现lodop打印功能的示例

01-18

3.vue部分实现　3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html 3.2 编写代码 <button class=print-btn v-on:click=btnClickPrint> <span>{{ msg }} </...

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

vue 前端实现打印功能

m0_64344940的博客

12-22

1145

vue 前端实现打印功能

vue3使用vue3-print-nb打印；vue3直接触发打印窗口

最新发布

i_am_a_div的博客

05-30

1546

vue3-print-nb 打印页面；vue页直接打印；vue直接触发打印；vue直接唤起打印弹窗

EL 表单打印输出

MZ199290的博客

10-26

895

<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> 表单数据用户名：

vue3.0 调用打印功能

Ling_a_Sir的博客

11-24

2116

vue3.0 js 打印

vue打印 vue-print-nb

weixin_58346650的博客

04-28

1941

vue3.0 组件篇Dialog

秋来九月八

06-15

5990

dialog是用户的交互式组件，常用在当前页面的消息确认，通知等如何用vue3构建一个dialog的组件，应该满足哪些功能？想要能够自定义头部尾部主要内容得能够控制dialog的弹出消失确认或者取消按钮能够控制dialog的宽度需要占满整个屏幕，交互区域应该位于屏幕正中间，点击其它地方无效你还能想到什么？

在VUE项目中实现打印

weixin_38107457的博客

04-28

126

npm install vue-print-nb --save 在mian.js中引入 import Print from 'vue-print-nb' Vue.use(Print); <el-dialog title="打印页面" :visible.sync="dialogVisible" width="40%" :loading="loading" size='small' @open="dialogOpen"> <div style="width:500px"&g

vue3简单打印实现（新测试：vue2打印原理相同）

weixin_41514441的博客

02-24

4812

前端打印 vue2+ 简单实现

vue中使用vue-print.js实现多页打印

11-21

在Vue项目中，有时我们需要为用户提供打印功能，这时可以借助vue-print.js这个库来实现。本文将详细讲解如何在Vue环境中使用vue-print.js解决多页打印、分页以及打印预览样式修改的问题。首先，我们需要引入和安装...

Vue中使用Lodop插件实现打印功能的简单方法

01-19

需要进行打印功能,Lodop就是实现需求的插件.就是引入对应的js-sdk,使用js调用对应的打印方法,然后就会调出客户端软件(需要用户安装),然后就可以在软件里面打印内容了. 使用方法最小实现实现打印必须要执行的3个...

Android手机连接蓝牙打印机实现打印功能

03-20

在Android平台上实现手机连接蓝牙打印机并进行打印功能是一项常见的需求，尤其在移动办公、零售等领域。这个场景中，我们主要涉及的技术点包括Android系统的蓝牙API、数据传输以及打印协议的理解。首先，Android...

vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

10-15

在Vue.js项目中，有时我们需要实现一个功能，即当用户点击按钮时，页面能够平滑地滚动到相应的位置。这个功能可以提升用户体验，特别是在长页面或者内容丰富的应用中。在提供的代码示例中，我们看到一种使用C3平滑...

在VUE中实现打印

JiAyInNnNnN123的博客

12-24

521

1.安装 npm install vue-print-nb --save 2.在mian.js中引入 import Print from 'vue-print-nb' Vue.use(Print); 3.在页面中使用 <el-dialog title="打印页面" :visible.sync="dialogVisible" width="40%" :loading="loading" ...

vue项目中打印功能的实现

i96249264_bo的博客

03-27

912

这篇文章是一个关于前端打印报表功能的实现，前端小白，如有问题多多指教，大佬勿喷！！！！案例描述：点击打印按钮，调用浏览器打印功能，实现打印报表。一：以下是前端布局页面  <el-dialog title="报表打印" :visible.sync="dialogVisible" width="70%" :before-close="handleClose"

Vue 浏览器的局部打印

Elernal_Lin的博客

05-25

1551

先说需求：点击打印调出弹出框->弹出框内展示打印内容->点击打印调出浏览器打印->浏览器打印预览为弹出框内容一、先说最终成品 1.首页内容 2.点击打印弹出打印内容 3.点击打印调出浏览器打印打印弹出框内容二、过程核心思路是控制浏览器打印内容盖住body的内容废话少说上代码辣 1.首页代码 <template> <div> <div>这是body的内容</div> <el-bu..

使用vue-print-nb实现打印，radio样式修改

m0_49529959的博客

03-24

2948

1.需求：使用A3纸打印试卷，选择使用vue-print-nb实现页面打印（修改后的图片效果） 2.问题：单选题/radio的样式html页面样式显示正常，但是打印预览时页面样式显示错位 3.解决办法：修改radio显示标签 print.vue（页面标签）  <!-- <el-radio-group v-if="questionItem.questionType ==

springboot和vue实现pdf打印功能

03-29

实现pdf打印功能需要以下步骤： 1. 在Spring Boot中使用PDFBox或iText等库生成PDF文件。 2. 将生成的PDF文件保存到服务器上。 3. 在Vue中使用pdf.js或其他库加载服务器上的PDF文件。 4. 在Vue中使用window.print()方法打印PDF文件。以下是具体的实现步骤： 1. 在Spring Boot中使用PDFBox或iText等库生成PDF文件以PDFBox为例，可以使用以下代码生成PDF文件： ```java PDDocument document = new PDDocument(); PDPage page = new PDPage(); document.addPage(page); PDPageContentStream contentStream = new PDPageContentStream(document, page); // 在页面上添加内容 contentStream.beginText(); contentStream.setFont(PDType1Font.HELVETICA_BOLD, 12); contentStream.newLineAtOffset(100, 700); contentStream.showText("Hello, World!"); contentStream.endText(); contentStream.close(); document.save("example.pdf"); document.close(); ``` 2. 将生成的PDF文件保存到服务器上可以使用Java的文件操作方法将生成的PDF文件保存到服务器上，例如： ```java File file = new File("example.pdf"); OutputStream outputStream = new FileOutputStream(file); document.save(outputStream); outputStream.close(); ``` 3. 在Vue中使用pdf.js或其他库加载服务器上的PDF文件可以使用pdf.js库加载服务器上的PDF文件，并在Vue组件中显示PDF文件。 ```html <template> <div> <pdf :src="pdfFile" :page="1"></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data () { return { pdfFile: 'http://localhost:8080/example.pdf' } } } </script> ``` 4. 在Vue中使用window.print()方法打印PDF文件可以在Vue组件中添加一个打印按钮，并在点击时调用window.print()方法打印PDF文件。 ```html <template> <div> <pdf :src="pdfFile" :page="1"></pdf> <button @click="printPDF">Print</button> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data () { return { pdfFile: 'http://localhost:8080/example.pdf' } }, methods: { printPDF () { window.print() } } } </script> ``` 这样就可以实现Spring Boot和Vue中的PDF打印功能了。