打印页面中某块内容vue

2024-11-04

vue 打印页面部分区域

1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容

关于打印整个页面的,没什么好说的.今天我给大家分享一个打印指定区域的方法,你想打印哪里,就打印哪里! 我也是刚刚开始接触打印这一块功能的,然后当然是找度娘深入了解了一番啦,期间试了网上的各种方法,有的压根就没效果: 有的可以实现打印部分区域的页面,但是在打印界面会丢失样式,那样子界面会很丑:下面我会列出网上的部分方法,以及我的方法.(插件我没有试过~) 网上方法一:(该方法我在vue页面使用没有做到指定区域打印,而是打印全部) 网上方法二:(该方法我在vue页面使用可以做到打印部分区域,但是样式

JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法

1,父 html 调用子 iframe 内方法: document.getElementById("iframe").contentWindow.func(data1,data2...); 2,子 Iframe 中调用父html中方法: parent.func(data1,data2...) 在VUE中: // 父vue文件调用 iframe html文件中方法:this.$refs.iframe.contentWindow.func(data1,data2...); // 在 i

flask页面中Head标签内容为空问题

在使用flask时遇到点问题,以前还没有注意到. 生成页面的时候使用的是模板继承方式,当添加meta标题的时候,本来是添加的base.html模板中的head标签中,但是生成页面后,head中的内容却到了body中,这个很奇怪的问题. 后来发现问题的解决方法,在使用flask的时候涉及到了中文的问题,所以将页面转码为“utf-8 有签名”,所以出现这个问题.将页面转为“utf-8 无签名”问题解决.

Tosca 添加插件或者是扩展功能，把页面上某块内容识别成table

#遇到了问题 "ICS table was not found" 是因为编辑case的时候用到了插件的功能, 但是setting里面却没有配置这个插件 #在哪里添加插件 #目的这个dll动态库是为了把下面页面上的内容识别成table #添加完毕后要重启commndar

JS(基础)_总结获取页面中元素和节点的方式

一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签结点:页面中所有的内容包括(标签,属性,文本(文字,空格,换行,回车)) 根元素:html标签 (2)节点属性 nodeType:表示节的类型: 1-------表示是标签, 2-------属性, 3-------文本 nodeName:节点的名字: 标签------大写的标签名字, 属性-----小写的

Vue项目中将table组件导出Excel表格以及打印页面内容

体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常会要求实现导出Excel的需求,项目中刚好遇到,实现起来也比较简单,记录一下. 1.这里主要需要两个依赖:xlsx.file-saver: npm install xlsx --save npm install file-saver --save 2.组件中引入 import FileSaver f

JS调用iframe方式实现Web区域打印页面内容

1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) JS 函数: 代码如下复制代码 function do_print(id_str)//id-str 打印区域的id{ var el = document.getElementById(id_str); var iframe = document.createElement('

js打印Iframe中的内容，并且不需要预览。

js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript"> function preview1() { var bdhtml = window.document.body.innerHTML; document.getElementById('PrintPath').focus(); document.getElementById('PrintP

window.print()打印页面指定内容（使用iframe保证原页面不失效）

使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来-->这样会导致原来页面状态失效使用iframe即可打印指定内容,也可保证页面不失效,具体方法如下: 1.将打印的内容独立出来为一个print.html文件,并为页面添加打印事件 <!DOCTYPE html> <html> <head> ... </head

SSI注入--嵌入HTML页面中的指令，类似jsp、asp对现有HTML页面增加动态生成内容，见后面例子

SSI注入漏洞总结 from:https://www.mi1k7ea.com/2019/09/28/SSI%E6%B3%A8%E5%85%A5%E6%BC%8F%E6%B4%9E%E6%80%BB%E7%BB%93/ 现在大多数Web服务已经很少用到SSI了,但是偶尔还是能碰碰运气的. 0x01 基本概念何为SSI SSI全称是Server Side Includes,即服务器端包含,是一种基于服务器端的网页制作技术. SSI是嵌入HTML页面中的指令,在页面被提供时由服务器进行运算,以对现有

使用jqprint插件实现打印页面内容

业务场景客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基本上开发的一个print插件,因此可以使用jQuery的方式查找元素,因此决定采用这种方式. 先看一下实现的效果图,如下: 实现效果图引入js文件 <script type="text/javascript" src="__JS__/jquery-migrate-1.

钉钉登录二维码嵌套在vue页面中

转自 https://www.csdn.net/tags/OtDacg3sMjQ2NTgtYmxvZwO0O0OO0O0O.html 钉钉登录二维码嵌套在vue页面中 2021-09-04 14:42:45 <template> <div id="app"> <div id="login_container"></div> </div> </template> <script> im

基于SqlSugar的开发框架循序渐进介绍（21）-- 在工作流列表页面中增加一些转义信息的输出，在后端进行内容转换

有时候,为了给前端页面输出内容,有时候我们需要准备和数据库不一样的实体信息,因为数据库可能记录的是一些引用的ID或者特殊字符,那么我们为了避免前端单独的进行转义处理,我们可以在后端进行统一的格式化后再行输出,后端处理可以采用不同的DTO尸体信息,后端对不同的实体进行映射处理即可,也可以采用同一个实体,在SqlSugar实体信息中忽略对应的字段写入实现,本篇随笔介绍后者的处理方式,实现在在工作流列表页面中增加一些转义信息的输出处理. 1.后端的转义处理大多数页面,我们的前端显示信息DTO和后端的

页面中多个script块之间的关系

一:函数声明与函数定义表达式在函数调用间的区别 <script type="text/javascript"> doA(); var doA = function(argument) { console.log('执行了') } </script> 结果: <script type="text/javascript"> doA(); function doA(argument) { console.log('执行了') } &l

window.print() 打印页面部分内容的方法

用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.print(); 打印页面上局部的数据,则可以用 //把数据嵌套在一个 div 里,获得 div var printData = document.getElementById("dvData").innerHTML; 获得 div 里的所有 html 数据 window.document.

在php中，如何将一个页面中的标签，替换为用户想输出的内容

前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例子,就是在php中如何读取另一个html页面中的标签,并显示用户想输出的内容. 首先建立一个页面,命名为:test.html如下图所示: <!doctype html> <html lang="en"> <head> <meta charset=&

nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容

1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ngix等代理,在用户访问的时候,就需要透过代理查看用户的真实IP地址,以下是nodejs获取客户端真实IP的代码: //获取客户端真实ip; function getClientIp(req) { var ipAddress; var forwardedIpsStr = req.headers['X

Android : 如何在WebView显示的页面中查找内容

Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是Android提供的常用组件之一.它主要被设计用来显示html文件.正因为如此,所以在应用的开发过程中我们可以通过将需要显示的内容整理成html格式的 String从而轻松实现各种排版的效果. 虽然WebView组件封装了许多功能为应用的开发提供了便利,但是由于其开放的方法有限,有时候这种便利往往会给

vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因.双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将