vue页面打印vue-print

2024-11-05

vue html页面打印功能vue-print

vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 使用方式安装 npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' Vue.use(Print); 页面中使用,给需要打印的容器加一个id,打印按钮传入这个id html: <div id="printMe" style="background:r

关于页面打印window.print()的样式问题

当我们打印网页的时候.有时候会发现.打印出来的.跟网页上看到的样式的差别有点大.这其中可能有的问题是.样式问题. 当调用打印(window.print())方法时.打印机会在网页的样式中查找 @media print{}的样式,并适应到要打印的网页中. 所以如果要打印的页面符合看到的页面效果,最好在写套样式 <style type="text/css"> /* @media print 为打印时适应的样式表*/ @media print { body { font-si

css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放，达到图片不变形目的，做出批量打印图片功能,页面打印“window.print()”

一.简介他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中.常应用于表格或图片目的最近有个需求是想"批量打印图片",而因此在打印时就会出现,图片过大,不能达到一张图一张纸的效果, 而有些图过小,让其一张纸容纳了两张图,同样不满足要求,那怎么做到符合要求的,我的想法是:将图片比例设置成符合长宽既可, 但新的问题又来了,如果强行设置长宽,就会导致

多页面打印--web print

背景:项目中要求做在一个页面中通过选择网址来打印多个页面的内容的功能原理:通过iframe把各网址的页面内容加载进来,通过iframe.contentWindow拿到iframe的window对象,把所有网址页面内容整合至一个里面,再通过样式page-break-after实现分页打印.iframe通过监听load事件确定页面加载结束,在load中再加载下一个页面,来确保加载的顺序进行. 输入:字符串或者数组输出:弹出打印框,接着打印操作. 实现:使用构造函数保存实例自己的属性,通过原型保存

使用那各VUE的打印功能（print.js）出现多打印一个空白页的问题

最近这段时间,用VUE写东西,有个打印功能. 百度了一下,铺天盖地的VUE打印的两种实现方法. 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴. 至少这些帖子告诉我,是有两个可以选择的,并且多看几篇帖子,总算把这两个打印方法,都试了一遍. 下面简单总结一下: 先说结论:请使用第二种方法,下载print.js到本地,然后放到项目中导入.原因后边说. 一.使用vue-print-nb方法具体的使用这里就不详细说明了,因为网上真的太多太多了.千篇一律的. 在本地直接npm安装

vue项目-打印页面中指定区域的内容（亲测有效！）

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

python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂载在页面上)的时候就执行 2. this对象 2. Vue实例的生命周期钩子函数(8个) 1. beforeCreate data属性光声明没有赋值的时候 2. created data属性完成了赋值 3. beforeMount 页面上的{{name}}还没有被渲染成真正的数据 4. mounted 页

【原】移动端vue页面点透事件 - 分析与解决

近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的router.push方法 b.vue之前已经访问过,数据通过vuex管理,从a.vue进入到b.vue不再请求数据,直接拿到b.vue数据展示页面: a.vue页面上点击最底部的账单后,不到100ms就打开b.vue页面,此时最底部的账单的触摸事件并没有消失,a.vue的触摸事件直接平移到b.vue最底部位

友盟统计单页面应用vue

根据友盟官方提示在index.html的body标签末尾加入相关代码后: 后来发现,由于项目为单页面应用,在路由发生跳转时(到其他页面了),并不会重新将新页面加入统计中.需要在App.vue页面中,监听路由,当路由发生变化时,将新页面加入统计中.在App.vue中加入以下代码: watch: { '$route' () { if (window._czc) { let location = window.location let contentUrl = location.pathname +

iframe嵌套vue页面打开新窗口

iframe嵌套vue页面时目录结构为下图: 此时出口文件指向index.html, 所以只需要用a标签动态拼接href, 并设置属性 target="_blank" ,即可在iframe打开新窗口

iview table icon dorpdown html页面级别vue组件 #vuez#

iview table icon dorpdown html页面级别vue组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="./assets/iview

Vue页面骨架屏（一）

在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题,越来越多的APP采用了“骨架屏”的方式去提升用户体验. 一.分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta h

Vue页面间传值，以及客户端数据存储

初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过路由跳转的,所以参数传值有两种方法,也就是借助$router的两个参数[params]和[query]. 页面跳转的话,可以通过页面路由的名称name或路径path去定义目标页面. 定义一个v-on:click="turnToPost(item.id)” 方法,进行页面跳转和传值. 传值页面: &l

vue 页面跳转传参

页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 VueRouter, 示例: 常用的场景是:列表页点击"查看"按钮,跳转到详情页. 在列表页(list.vue)按钮点击事件里写上 detail(row) { this.$router.push({ path: "detail", query: { id: row.id

URL不变的情况下，最实用的vue刷新当前页面，provide / inject 组合方式实现vue页面刷新

原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/article/details/89022149 由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view 这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / in

解决页面初始化vue加载代码问题

html页面引入vue组件

html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html 1.创建my-component.vue <template> <div class="hello">Hello {{who}}</div> </template&g

vue页面顺序规范

// html模板<template> <div>因联vue页面规范</div></template><script> // 模块系统 import a from './module/a.vue' import moment from 'momnet' export default { // 页面组件名称 name: 'MyComponentName', // 引用组件 compon

Vue页面缓存和不缓存的方法

第一步在app中设置需要缓存的div //缓存的页面 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> //不缓存的页面 <router-view v-if="!$route.meta.keepAlive"></router-view> 第二步在路由router.js中设置.

Vue 页面前进刷新后退不刷新（keepAlive）

前言遇到这一个个问题需要是这样的 Vue里面的不刷新问题页面分为: A 主页 B列表页 C 详情页 A beforeRouteLeave 时设置 to.meta.keepAlive = false (A 进入 B页面时), 不缓存 B列表页 B beforeRouteLeave 时 (B -> C)列表页进详情页时 from.meta.keepAlive =true 缓存B列表页 C详情页返回 B列表页 ,此时B列表页缓存不生效,也就是第一次不生效总结问题原因: 当进入B列表页

vue页面打印vue-print

热门专题