精华内容
下载资源
问答
  • window窗口尺寸和window.screen屏幕尺寸的正确理解

    *以前用到媒体查询,以当前窗口大小为判断条件的时候,window窗口大小和屏幕大小的用法和写法,傻傻分不清楚,今天来梳理一下。

    一、首先来说说window窗口大小:

    浏览器的窗口尺寸的理解:浏览器的视口(不包括工具栏和滚动条)。
    如下图:

    *1.窗口宽度就是整个浏览器左边到右边(包括 上下滚动条的宽度)的宽度。注意,上图没有水平的左右滚动条,但是窗口宽度是不包
    括水平滚动条中未出现的界面,只取浏览器最大化后的可见视口(即上图左右红色箭头标注处)。
    *2.窗口高度为上图黄色区域(工具栏)下边到红色区域(任务栏)上边的距离(包括 水平左右滚动条的高度),不包括上下滚动条中
    未出现的界面,只取最大化浏览器后的可见界面。

    获取尺寸的方法有几种:

    1.对于IE、Chrome、FF、Safari等
    宽度:window.innerWidth.
    高度:window.innerHeight.
    2.对于IE8、7、6、5:
    宽度:document.documentElement.clientWidth 或者document.body.clientWidth
    高度:document.documentElement.clientHeight 或者 document.body.clientHeight

    二、Window Screen 屏幕尺寸

    1. screen宽度也就是我们的屏幕分辨率的宽度。
    2. screen高度是除去我们底部任务栏外的屏幕高度。

        获取尺寸的方法:

    * window.screen对象在编写时可以不使用 window 这个前缀

    1. screen.availWidth - 可用的屏幕宽度

    2.screen.availHeight - 可用的屏幕高度

    实例如:
    <span style="white-space:pre">	</span><script>
    <span style="white-space:pre">		</span>document.write("Available Width: " + screen.availWidth);
    <span style="white-space:pre">	</span></script>




    展开全文
  • vue window.scrollTo屏幕滚动

    千次阅读 2019-01-25 11:05:24
    获取高度和滚动高度 滚动到一定高度导航栏跟着变化 点击导航栏 跳转到指定位置

    获取高度和滚动高度

    在这里插入图片描述
    滚动到一定高度导航栏跟着变化

    在这里插入图片描述

    在这里插入图片描述

    点击导航栏 跳转到指定位置

    在这里插入图片描述

    展开全文
  • 对于Window 10操作系统的电脑: 第一步: 先点击鼠标右键,然后点击显示设置,如图: 第二步: 之后点击确认即可!

    对于Window 10操作系统的电脑:
    第一步:
    先点击鼠标右键,然后点击显示设置,如图:
    在这里插入图片描述
    第二步:

    在这里插入图片描述

    之后点击确认即可!

    展开全文
  • window 系统最好用的屏幕拾色器,window 系统最好用的屏幕拾色器
  • window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,...
  • window.print打印pdf

    千次阅读 2020-05-15 23:35:00
      前端打印pdf就是使用原生的window.print()方法实现,这里有几个问题你会遇到。 打印纸张大小,不同纸张大小,你需要相应调整表格宽度和最大分页高度 分页时机,不适当的话会导致表格跨页分断 背景色打印,这个...

    1、前言

      前端打印pdf就是使用原生的window.print()方法实现,这里有几个问题你会遇到。

    • 打印纸张大小,不同纸张大小,你需要相应调整表格宽度和最大分页高度
    • 分页时机,不适当的话会导致表格跨页分断
    • 背景色打印,这个是不能设置的,但是通过css属性可以实现
    • 打印时的css设置

    前端环境:vue+element ui

    2、代码实例

    <template>
        <div>
            <div id="toolBox">
                <div class="toolBox">
                    <el-button type="primary" plain size="small" style="margin-top: 20px;width: 130px;" @click="saveAsPdf">
                        打印PDF
                    </el-button>
                </div>
            </div>
            <div :id="tableConfig.pdfId" :class="tableConfig.pdfClass" v-for="(tableConfig,configIndex) in tableConfigList"
                 :key="configIndex">
                <div class="thisPage">
                    <h1 style="text-align: center">window.print方法demo</h1>
                </div>
                <div class="thisPage" v-for="(data,index) in dataList" :key="index" :style="tableConfig.tableStyle">
                    <el-table :data="data" :header-cell-style="tableHeader" border>
                        <el-table-column column-key="col1_" prop="col1_" label="第一列"></el-table-column>
                        <el-table-column column-key="col2_" prop="col2_" label="第二列"></el-table-column>
                        <el-table-column column-key="col3_" prop="col3_" label="第三列"></el-table-column>
                        <el-table-column column-key="col4_" prop="col4_" label="第四列"></el-table-column>
                        <el-table-column column-key="col5_" prop="col5_" label="第五列"></el-table-column>
                    </el-table>
                    <el-divider></el-divider>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: 'windowPrint',
            data() {
                return {
                    data: {
                        col1_: '',
                        col2_: '',
                        col3_: '',
                        col4_: '',
                        col5_: ''
                    },
                    dataList: [],
                    tableHeader: {
                        'color': 'aliceblue',
                        'background-color': 'slateblue'
                    },
                    tableConfigList: [{
                        pdfId: 'comment_report',
                        pdfClass: '',
                        tableStyle: `'100%'`
                    }, {
                        pdfId: 'print_report',
                        pdfClass: 'comment_hide',
                        tableStyle: `width:1100px;`
                    }]
                }
            }, methods: {
                getData() {
                    let keys = Object.keys(this.data);
                    let size = 35;
                    for (let i = 0; i < size; i++) {
                        this.dataList[i] = new Array();
                        for (let j = 0; j < i; j++) {
                            let tempData = {};
                            keys.forEach(key => {
                                tempData[key] = key + i + j;
                            })
                            this.dataList[i][j] = tempData;
                        }
                    }
                    this.dataList[size] = [];
                },
                saveAsPdf() {
                    let commentReport = document.getElementById("comment_report");
                    let printReport = document.getElementById("print_report");
                    let toolBox = document.getElementById("toolBox")
                    toolBox.className = "print_hide";
                    commentReport.className = "print_hide";
                    printReport.className = "print_content";
    
                    let thisPage = printReport.querySelectorAll('.thisPage');
                    let curHeight = 0;
                    let a3PageHeight = 1558;
                    for (let item of thisPage) {
                        let contentHeight = parseInt(window.getComputedStyle(item).height)
                        if ((curHeight + contentHeight) > a3PageHeight) {
                            console.log("a page")
                            item.style.pageBreakBefore = "always";
                            // 清空
                            curHeight = 0;
                        }
                        if(contentHeight<a3PageHeight){
                            curHeight += contentHeight
                        }else {
                            curHeight = contentHeight % a3PageHeight
                        }
                        console.log("item", contentHeight, curHeight);
                    }
                    setTimeout(() => {
                            window.print();
                            toolBox.className = "toolBox";
                            printReport.className = "comment_hide";
                        }, 1000
                    )
                }
            },
            created() {
                this.getData();
            }
        }
    </script>
    
    <style scoped>
        .toolBox {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: right;
            background: rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 3px #e4e4e4;
            z-index: 9999;
        }
    
        .toolBox .el-button {
            margin: 0;
            transform: translate(-50%, -40%);
        }
    
        @page {
            size: A3;
            margin: 0;
        }
    
        .comment_hide {
            display: none;
        }
    
        @media print {
    
            .print_hide {
                display: none;
            }
    
            .print_content {
                margin-top: 20px !important;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                -ms-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
    

    3、代码解析

    • 背景色打印

    需要打印的内容包含在这个css属性里面的class即可

    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
    
    • 打印时的css设置
      @media print{}这个css里面的属性会在打印时才会运行渲染

    • 打印纸张大小

       @page {
            size: A3;
            margin: 0;
        }
    

    在@page里面可以设置纸张大小,这里设置的是A3大小,至于宽高,网页打印的宽高好像是跟屏幕有关,这里设置宽1100px刚好更我屏幕打印时的宽度相当,每页高度这里选用1558px,高度好像相对稳定。

    • 分页时机
      这里分页是根据你的控件高度计算而知的,当累计高度高于分页高度则将当前控件前插入分页符,设置方法如下:
    item.style.pageBreakBefore = "always";
    

    通过设置style为page-break-before:always实现
    ps:网上全是page-break-after:always实现的,难道page-break-before不香么

    • html结构
      1、这里是通过tableConfigList这个配置变量,控制两个大的div的id、class和table的宽度
      2、每个需要分页的控件都用class="thisPage"标记,便于查找
      3、绘制两次需要网页内容,一次是用于用户看的,一次是用于打印的隐藏内容,打印的时候,设置隐藏用户看的,显示打印的内容,实现直接打印,而不影响用于观感

    • 解析saveAsPdf方法

     	saveAsPdf() {
                    let commentReport = document.getElementById("comment_report");
                    let printReport = document.getElementById("print_report");
                    let toolBox = document.getElementById("toolBox")
                    toolBox.className = "print_hide";
                    commentReport.className = "print_hide";
                    printReport.className = "print_content";
    
                    let thisPage = printReport.querySelectorAll('.thisPage');
                    let curHeight = 0;
                    let a3PageHeight = 1558;
                    for (let item of thisPage) {
                        let contentHeight = parseInt(window.getComputedStyle(item).height)
                        if ((curHeight + contentHeight) > a3PageHeight) {
                            console.log("a page")
                            item.style.pageBreakBefore = "always";
                            // 清空
                            curHeight = 0;
                        }
                        if(contentHeight<a3PageHeight){
                            curHeight += contentHeight
                        }else {
                            curHeight = contentHeight % a3PageHeight
                        }
                        console.log("item", contentHeight, curHeight);
                    }
                    setTimeout(() => {
                            window.print();
                            toolBox.className = "toolBox";
                            printReport.className = "comment_hide";
                        }, 1000
                    )
                }
    

    1、获取用于显示的report内容和用于打印的report内容
    2、将toolBox、commentReport、printReport对应class的html元素,设置class为print时的才会渲染的class
    3、控制page-break-before:always属性的设置,当加上当前元素,超过页高度,则当前元素设置style为page-break-before:always,提示print方法这里要分页
    4、处理单页超过打印纸张大小问题,这里超过了,没有去处理,只处理了超过后下一个元素加上不超过纸张高度下,追加上下一个元素
    5、最后要设置延时,不然会渲染不足。

    在这里插入图片描述
    demo地址:https://github.com/Hitvz/pdfoutput
    参考博客:vue+element打印页面功能

    展开全文
  • // 监听屏幕转动 window.addEventListener('orientationchange',function(){ var orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; //这里是横屏 ...
  • 查看屏幕分辨率dumpsys window displays

    千次阅读 2018-04-09 11:44:32
    dumpsys window displays
  • window VNC Viewer设置屏幕分配率

    千次阅读 2017-06-27 22:47:35
    问题:远程时,显示的界面不会跟着本机屏幕大小而自动调节,导致无法在页面中完全显示屏幕的内容。 解决1:打开VNC Viewer,选择Options,在Scale to window size 前面打勾。然后输入VNC server 地址,点击connect ...
  • 修改的方法是这样的 下载nircmd: http://www.nirsoft.net/utils/nircmd.html 修改分辨率: ./nircmd.exe setdisplay 1280 720 32 ./nircmd.exe setdisplay 1024 768 32 ./nircmd.exe setdisplay 800 600 32
  • js得到屏幕宽高、页面宽高 (window.screen.availHeight) window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.availHeight 返回当前屏幕高度(空白空间)  window.screen.width 返回...
  • Ext window的大小与屏幕匹配

    千次阅读 2012-01-16 11:05:21
    Ext window的大小与屏幕匹配 2009年08月14日 星期五 16:13 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth ...
  • 【Win10使用】Window10 调整屏幕颜色的方法 方法: 一.方法一:个性化-颜色 二.方法二:修改注册表 详细步骤:(仅详细附上亲测第一种,第二种附上方法链接) 一. 方法一:个性化-颜色 1.鼠标右键...
  • 关于js获取屏幕高度和宽度( window.document.body,window.screen)(PC端和移动端)  在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个; Js/Jquery获取网页屏幕...
  • window对象下获取的屏幕宽高

    千次阅读 2017-10-23 10:27:22
    1.浏览器的内部窗口宽度(兼容写法):window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 浏览器的内部窗口高度(兼容写法):window.innerHeight || do
  • window.open窗口显示在屏幕中央

    千次阅读 2016-03-26 22:47:32
    function showNew() { var width=200;  var height=200; ...var y=(window.screen.availHeight-200);...var x=(window.screen.availWidth-200);...var mywindow=window.open("","_blank","height="+height+",wid
  • window.onresize监听div和屏幕的改变

    万次阅读 2016-08-12 11:32:26
    监听屏幕的改变:<!DOCTYPE html> <title></title> , maximum-scale=1.0, minimum-scale=1.0, user-scalable=
  • 转载 ... 1、首先使用 Win+R 组合快捷bai键打开Win10运行对话框,输入命令:regedit 回车 2、打开注册表编辑器后,依次展开位置:HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Class{4d36e968-e325-11ce-bfc1-...
  • window+L锁不了电脑屏幕解决方案

    千次阅读 2021-01-08 21:56:16
    可以试试win+FN, 应该是win锁住了 之后window+L成功锁屏
  • [原创]Swing技巧.3:将window设置在屏幕中间//将window设置在屏幕中间,Window,Frame,Dialog,JWindow,JFrame,JDialogpublic static void setToScreenCenter(Window window){ Dimension screenSize = Toolkit....
  • window.open打开新窗口屏幕居中

    千次阅读 2018-05-12 22:39:31
    window.open(url,name,'width='+newWinWidth+',height='+newWinHeight+',left='+left+',top='+top+',toolbar=no,menubar=no,location=no,status=no'); //name:弹出窗口的名字,可不填,用''代替 //...
  • window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height 返回当前屏幕高度...
  • window下,可执行脚本运行结果保存到文件的同时显示在屏幕方法: 如window下的可执行脚本run.bat内容: command A command B command C 目标:将run.bat运行结果在终端屏幕上显示并保存到文件result.xml中 ...
  • window.print()方法打印

    千次阅读 2019-06-10 14:17:16
    由于项目中用到了打印功能,也在网上查询了些方法,总体来说有两个思路: 1. dom替换 2. 新窗口打印 dom替换会导致事件失效,如果重新加载的话又会影响到体验;而新窗口缺因为样式问题也不好解决,都不满足项目的...
  • window下tomcat打印catalina.out问题

    千次阅读 2015-11-26 16:36:19
    在Linux系统中,Tomcat 启动后默认将很多信息都... 在windows下,我们使用startup.bat启动Tomcat以后,会发现catalina日志与Linux记录的内容有很大区别,大多信息只输出到屏幕而没有记录到catalina.out里面。 本文的
  • self.window.userInteractionEnabled =NO; 这样就可以让整个屏幕停止响应了啊 NSTimeInterval time = [[NSDate date] timeIntervalSince1970]; 可以这样定义  NSLog(@"当前时间为%f", time); 打印出从1970年...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 222,425
精华内容 88,970
关键字:

window如何打印屏幕