程序员经验分享-hwhale

Vue3打印功能

2023-11-07

 

目录

 安装 vue3-print-nb

main.js中引入 vue3-print-nb

页面内引入

声明打印时的配置的变量

选择要打印的模板区域，配置对应的id包裹

配置完成了看效果，点击打印出现打印模态框

 安装 vue3-print-nb

yarn add vue3-print-nb
//或
npm install vue3-print-nb

main.js中引入 vue3-print-nb

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 打印插件
import print from 'vue3-print-nb'
app.use(print)
//

页面内引入

 

import print from 'vue3-print-nb'
const vPrint = print;

声明打印时的配置的变量

const printSetting = ref({
    id: 'printMe',
})

选择要打印的模板区域，配置对应的id包裹

 <div id="printMe">
   <!-- 打印部分 -->
            
 </div>

为打印按钮绑定上v-print指令，值为配置变量

<div v-print="printSetting">打印</div>

配置完成了看效果，点击打印出现打印模态框

 其他打印配置可看文档

传送门

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

javascript

vuejs

Vue3打印功能 的相关文章

  • 在 Google 表格脚本中设置活动单元格的值

    我想创建一个公式 在某个单元格更改上创建时间戳 下面的代码就可以了 我现在想做的是将公式转换为纯文本 将该时间戳锚定到工作表上 如果您手动执行此操作 您将选择时间戳 复制它们并将它们粘贴为值 我不想手动执行此操作 因此我创建了下面的脚本 它

  • React Native：不透明视图内的透明视图

    我想用不透明框架和透明中心显示相机的视图 就像图片中的一样 黑色部分是相机的视图 我正在寻找具有纯反应本机组件的解决方案 没有额外的库 例如https github com gilbox react native masked view h

  • 如何强制折断不可折断的字符串？

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link

  • Javascript 在另一个函数中检测“Shift”键按下

    我正在从 Flash 影片 使用外部接口 调用我的 html 页面中的 Javascript 函数 并且我想知道调用该函数时用户是否按下了 Shift 键 例如 如果我通过鼠标单击调用该函数 这似乎很简单 因为我可以传递事件并检查 if e

  • window.open：是否可以打开一个新窗口并修改其 DOM

    我想打开一个新窗口 var my window open iframe html blank height 600 width 600 但当我打开它时 我想修改它的DOM 我尝试过 var div my document createEle

  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会

  • setInterval() 在用户离开选项卡时暂停？

    javascript 中是否有任何方法的行为类似于 setInterval 并且当用户离开选项卡时停止并在用户再次进入选项卡时恢复 您可以使用以下方法创建自己的 API可见性API https developer mozilla org e

  • “|”是什么意思（单管道）在 JavaScript 中做什么？

    console log 0 5 0 0 console log 1 0 1 console log 1 0 1 为什么0 5 0返回零 但任何整数 包括负数 都返回输入整数 单管道 有什么作用 这是一个按位或 https developer

  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array

  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的

  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL

  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do

  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分

  • 是否可以将请求标头添加到 CORS 预检请求中？

    我有一个从外部服务器 不是服务器 访问 API 的网站 为网站提供服务 通过简单的XmlHttpRequest 见下文 那个API 需要将用于访问服务的 API 密钥添加为请求标头 然而 正如这些CORS https developer m

  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a

  • 如何为 Imagus 悬停缩放扩展开发自定义过滤器？

    当我读到关于悬停缩放是邪恶的 http www reddit com r YouShouldKnow comments 1wjrc8 ysk that the hover zoom extension is spyware 哎呀 有两篇文章

  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur

  • 在方法内部执行方法

    我目前正在 FreeCodeCamp 中进行 JavaScript 练习 我的代码应该使用的测试用例之一是函数调用 如下所示 addTogether 2 3 这是我得到的基本功能 function addTogether return 当我

  • ReactJs 警告：不推荐使用改变“style”。考虑事先克隆它

    我收到以下警告 inWarning div was passed a style object that has previously been mutated Mutating style is deprecated Consider c

  • 用javascript调用外部网页（跨域）

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax

随机推荐

  • 基础13：惰函数

    有两种实现惰性载入的方式 第一种事函数在第一次调用时 对函数本身进行二次处理 该函数会被覆盖为符合分支条件的函数 这样对原函数的调用就不用再经过执行的分支了 我们可以用下面的方式使用惰性载入重写addEvent function addEv

  • python语言是一种面向过程的语言_浅谈编程语言中的面向过程和面向对象

    最近一直在自学Python 在 Python学习手册 的开篇有一句话 Python可以定义为面向对象的脚本语言 这句话让我十分困惑 并且在之后的一周里面让我总是混淆一些概念 到底什么是 面向对象 到底什么是 对象 带着这个疑问 我继续向下学

  • C# winform 一次只能允许一个应用(使用mutex)

    在很多应用程序开发过程中 需要只允许一个程序实例 即使是通过虚拟桌面方式连接过来的 也是只允许一个人运行 下面是实现该功能的代码 注意mutexName 为系统名称 Global为全局 表示即使通过通过虚拟桌面连接过来 也只是允许运行一次

  • verilog学习笔记（1）module实例化

    兜兜转转又回来学硬件了 哎 命啊 我的答案 有bug module top module input a input b output out wire w1 wire w2 wire w3 mod a mod a inst1 in1 w1

  • IDEA引入JDK/jar包无效、java 文件灰色右下角橙色java图标显示等问题解决办法

    一 引入jdk jar包无效 IDEA有时候会出现引入jdk无效的情况 import灰色 代码爆红 这是因为idea检测发现包并没有导入进来 1 如果是普通java项目 jdk等都配置好还是这样的话 可以通过 清除缓存并重启的方式解决 如下

  • k8s的1.20.15的kubeadm安装教程

    k8s的1 20 15的kubeadm安装教程 1 基础环境配置 1 1 配置信息 系统版本 centOS7 9 docker版本 19 03 x kubernetes 1 20 x Pod网段 172 168 0 0 16 service

  • Fiddler下载安装 Mac版

    目录 下载 安装 下载 1 进入FiddlerDownload Fiddler Web Debugging Tool for Free by Telerik下载网站 点击 Try Fiddler Everywhere 2 我这里选择的是ma

  • 【Spring Boot 初识丨一】入门实战

    学习前提 学习Spring Boot的前提是具备Java编程基础 包括面向对象编程 Java集合框架 异常处理 多线程等基本概念和技能 此外 还需要了解Web开发的基本知识 例如HTTP协议 Servlet JSP HTML CSS Jav

  • 《eNSP - OSPF 查看命令》

    display ospf peer 查看 OSPF 邻居的相关信息 display ip routing table protocol ospf 查看 OSPF 协议路由表 display ospf interface 查看运行 OSPF

  • LeetCode-二进制中1的个数

    计算机中的补数是 两个数加起来等于在二进制里一个非常整的数 比如 加起来等于 10000000000000000000000000000000000这样的 1 01 的补数 111111111111111111111111111111111

  • springboot封装响应实体

    前言 首先什么是响应实体 正常我们的后端都是接收前端 然后把请求需要的数据返回给前端 而这个返回的数据就是我们的响应实体 那么 为什么我们需要进行封装响应实体呢 第一点 最明显的就是 为了人机友好交互 如果单单只是把返回的数据给到前端 有数

  • Leetcode53/152—最大子数组和/最大子数组乘积（状态转移方程/不熟）

    53 最大子数组和 给你一个整数数组 nums 请你找出一个具有最大和的连续子数组 子数组最少包含一个元素 返回其最大和 子数组 是数组中的一个连续部分 思路 aaaaa 我老不会这个题 动态规划的是首先对数组进行遍历 当前最大连续子序列和

  • 什么是Spring三级缓存 对象在三级缓存中的创建流程 【三级缓存 循环依赖】

    一 什么是Spring三级缓存 第一级缓存 也叫单例池 存放已经经历了完整生命周期的Bean对象 第二级缓存 存放早期暴露出来的Bean对象 实例化以后 就把对象放到这个Map中 Bean可能只经过实例化 属性还未填充 第三级缓存 存放早期

  • Confluence不仅仅是一个wiki，它还可以是一个应用系统平台。

    利用Confluence插件系统 可以很容易地定制和扩展Confluence来满足您的需要 下面是Confluence开发者社区所开发的一些被广泛使用的插件 我们提供了一个包含了更多插件的库 您甚至可以去开发自己的插件 Office Con

  • JavaScript从题学习——预解析案例

    前言 从题中快速了解和复习下变量提升 函数提升 作用域链 预解析案例 答案在最后 案例1 var num 10 fun function fun console log num var num 20 相当于执行了以下操作 var num f

  • 1024 程序员节：低代码低成本硬件 - 树莓派 Pico 2040

    恰逢 1024 程序员节 程序员们忙着开交流会 或者写代码 来庆祝节日 或者随便写点什么 留下自己的足迹 CSDN 组织了好几个线下 线上的会 大家也在讨论开源 开放 小米的崔总 引用了 论语 里的一句话 德不孤 必有邻 来评价正确的开源之

  • 判断回文串C++

    题目描述 输入一串字符 字符个数不超过1000 判断它们是否构成回文 所谓回文字符串 就是一个字符串 从左到右读和从右到左读是完全一样的 比如 level aaabbaaa 输入 输入只有一行 包括一串字符 输出 输出只有一行TRUE或者F

  • 从mysql数据库中读取二进制文件_ASP中从数据库读取二进制文件数据代码

    driver name1 DRIVER Microsoft Access Driver mdb DBQ D 数据库 TREE MDB 根目录下数据库打开语句 dim search rs j search select from Files

  • 关于图像处理技术检测火焰的一些建议（仅个人观点）

    1 火焰检测是图像识别的一个细类 某种意义上图像识别的技术都可以用于火焰检测 因此如帧间差分法 RGB方法等都可直接搜相应方法获得源码 直接用于火焰检测 微调参数即可 当然这种检测结果是不佳的 2 火焰检测需要认清到底是要检测动态火焰还是静

  • Vue3打印功能

    目录 安装 vue3 print nb main js中引入 vue3 print nb 页面内引入 声明打印时的配置的变量 选择要打印的模板区域 配置对应的id包裹 配置完成了看效果 点击打印出现打印模态框 安装 vue3 print n

热门标签